:root {
            --navy: #fffdf8;
            --navy-light: #f5ede8;
            --navy-card: #ffffff;
            --gold: #971522;
            --gold-light: #b8202f;
            --text: #1c1010;
            --text-muted: #6b5c5e;
            --border: rgba(151, 21, 34, 0.15);
            --success: #16a34a;
            --error: #dc2626;
            --warning: #d97706;
            --info: #2563eb;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--navy);
            color: var(--text);
            min-height: 100vh;
        }

        /* ── Sidebar ── */
        .layout {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 240px;
            flex-shrink: 0;
            background: var(--navy-light);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            height: 100vh;
            top: 0;
            left: 0;
        }

        .sidebar-brand {
            padding: 28px 24px 20px;
            border-bottom: 1px solid var(--border);
        }

        .sidebar-brand h1 {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 600;
            color: var(--gold);
            letter-spacing: 1px;
        }

        .sidebar-brand p {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 3px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .sidebar-nav {
            padding: 16px 12px;
            flex: 1;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 14px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all .2s;
            margin-bottom: 2px;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .nav-item:hover {
            background: rgba(200, 169, 110, .08);
            color: var(--text);
        }

        .nav-item.active {
            background: rgba(200, 169, 110, .15);
            color: var(--gold);
        }

        .nav-item svg {
            width: 16px;
            height: 16px;
        }

        .sidebar-status {
            padding: 16px;
            border-top: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-muted);
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--success);
            display: inline-block;
            margin-right: 6px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .5
            }
        }

        /* ── Main ── */
        .main {
            margin-left: 240px;
            flex: 1;
            padding: 32px;
        }

        /* ── Header ── */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 28px;
        }

        .page-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            color: var(--text);
        }

        .page-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* ── Stats ── */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px 20px;
            transition: transform .2s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
        }

        .stat-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-top: 6px;
        }

        .stat-value.gold {
            color: var(--gold);
        }

        .stat-value.green {
            color: var(--success);
        }

        .stat-value.blue {
            color: var(--info);
        }

        .stat-value.yellow {
            color: var(--warning);
        }

        .stat-value.red {
            color: var(--error);
        }

        /* ── Actions bar ── */
        .actions-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 24px;
            align-items: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all .2s;
            font-family: 'Inter', sans-serif;
        }

        .btn-primary {
            background: var(--gold);
            color: var(--navy);
        }

        .btn-primary:hover {
            background: var(--gold-light);
            transform: translateY(-1px);
        }

        .btn-outline {
            background: transparent;
            color: var(--gold);
            border: 1px solid var(--gold);
        }

        .btn-outline:hover {
            background: rgba(200, 169, 110, .1);
        }

        .btn-danger {
            background: transparent;
            color: var(--error);
            border: 1px solid var(--error);
        }

        .btn-danger:hover {
            background: rgba(248, 113, 113, .1);
        }

        .btn-sm {
            padding: 7px 12px;
            font-size: 12px;
            border-radius: 6px;
        }

        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }

        .btn-loading {
            position: relative;
            pointer-events: none;
        }

        .btn-loading::after {
            content: '';
            width: 14px;
            height: 14px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin .6s linear infinite;
            position: absolute;
            right: 12px;
        }

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

        @keyframes fadeSlideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Panels ── */
        .panel {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
        }

        .panel-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .panel-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
        }

        /* ── Table ── */
        .leads-table {
            width: 100%;
            border-collapse: collapse;
        }

        .leads-table th {
            padding: 12px 20px;
            text-align: left;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 1px solid var(--border);
        }

        .leads-table td {
            padding: 14px 20px;
            font-size: 13px;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            vertical-align: middle;
        }

        .leads-table tr:last-child td {
            border-bottom: none;
        }

        .leads-table tr:hover td {
            background: rgba(255, 255, 255, .02);
        }

        /* ── Badges ── */
        .badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .5px;
        }

        .badge-new {
            background: rgba(96, 165, 250, .15);
            color: #93c5fd;
        }

        .badge-sent {
            background: rgba(251, 191, 36, .15);
            color: #fde68a;
        }

        .badge-queued {
            background: rgba(156, 163, 175, .15);
            color: #9ca3af;
        }

        .badge-unsubscribed {
            background: rgba(200, 169, 110, .15);
            color: var(--gold);
        }

        .badge-error {
            background: rgba(248, 113, 113, .15);
            color: #fca5a5;
        }

        .badge-paid {
            background: rgba(22, 163, 74, .12);
            color: #4ade80;
        }

        .badge-pending {
            background: rgba(217, 119, 6, .12);
            color: #fbbf24;
        }

        .badge-unpaid {
            background: rgba(220, 38, 38, .12);
            color: #f87171;
        }

        /* ── Color utilities ── */
        .green { color: var(--success); }
        .red   { color: var(--error); }

        /* ── Stage pill ── */
        .stage-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, .06);
            border-radius: 100px;
            padding: 3px 10px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .stage-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold-light);
        }

        /* ── Sections ── */
        .section {
            display: none;
        }

        .section.active {
            display: block;
        }

        /* ── Add lead form ── */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 24px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .form-label {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .8px;
        }

        .form-input,
        .form-textarea {
            background: var(--navy-light);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 14px;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            transition: border-color .2s;
            outline: none;
        }

        .form-input:focus,
        .form-textarea:focus {
            border-color: var(--gold);
        }

        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-actions {
            padding: 0 24px 24px;
            display: flex;
            gap: 10px;
        }

        /* ── Log ── */
        .log-list {
            padding: 0;
            max-height: 480px;
            overflow-y: auto;
        }

        .log-item {
            display: flex;
            gap: 14px;
            padding: 14px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            align-items: flex-start;
        }

        .log-item:last-child {
            border-bottom: none;
        }

        .log-icon {
            font-size: 16px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .log-content {
            flex: 1;
            min-width: 0;
        }

        .log-event {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
        }

        .log-meta {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 3px;
        }

        .log-subject {
            font-size: 12px;
            color: var(--gold);
            margin-top: 2px;
            font-style: italic;
        }

        .log-time {
            font-size: 11px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        /* ── Toast ── */
        .toast-wrap {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .toast {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            min-width: 280px;
            animation: slideIn .3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
        }

        .toast.success {
            border-color: var(--success);
        }

        .toast.error {
            border-color: var(--error);
        }

        @keyframes slideIn {
            from {
                transform: translateX(110%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* ── Modal ── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 998;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }

        .modal-overlay.open {
            opacity: 1;
            pointer-events: all;
        }

        .modal {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px;
            max-width: 520px;
            width: 90%;
            transform: translateY(20px);
            transition: transform .2s;
        }

        .modal-overlay.open .modal {
            transform: translateY(0);
        }

        .modal h2 {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            margin-bottom: 12px;
            color: var(--gold);
        }

        .modal-subject {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 10px;
        }

        .modal-body {
            font-size: 14px;
            line-height: 1.7;
            white-space: pre-wrap;
            color: var(--text);
            background: var(--navy-light);
            border-radius: 8px;
            padding: 16px;
            max-height: 300px;
            overflow-y: auto;
        }

        .modal-meta {
            margin-top: 14px;
            font-size: 11px;
            color: var(--text-muted);
        }

        .modal-actions {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        /* ── Empty ── */
        .empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        .empty svg {
            width: 40px;
            height: 40px;
            margin: 0 auto 12px;
            opacity: .4;
        }

        .empty p {
            font-size: 14px;
        }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(200, 169, 110, .3);
            border-radius: 10px;
        }

        /* ── Orders Overview Cards ── */
        .ord-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }

        .ord-sum-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 10px;
            padding: 20px 22px;
            border-radius: 14px;
            border: 1px solid transparent;
            cursor: pointer;
            font-family: inherit;
            transition: transform .2s, box-shadow .2s, border-color .2s;
            position: relative;
            min-height: 148px;
        }
        .ord-sum-card.theme-payment {
            min-height: 200px;
        }

        .ord-sum-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 28px rgba(28, 16, 16, 0.08);
        }

        .ord-sum-card.theme-active {
            background: #f8f1f2;
            border-color: rgba(151, 21, 34, 0.18);
        }
        .ord-sum-card.theme-critical {
            background: #fdf2f2;
            border-color: rgba(220, 38, 38, 0.2);
        }
        .ord-sum-card.theme-shipped {
            background: #f0fdf4;
            border-color: rgba(22, 163, 74, 0.2);
        }
        .ord-sum-card.theme-due {
            background: #fff7ed;
            border-color: rgba(217, 119, 6, 0.22);
        }
        .ord-sum-card.theme-payment {
            background: #eff6ff;
            border-color: rgba(37, 99, 235, 0.18);
        }
        .ord-sum-card.theme-fit {
            background: #f5f3ff;
            border-color: rgba(124, 58, 237, 0.18);
        }

        .ord-sum-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.7);
        }
        .theme-active .ord-sum-icon { color: var(--gold); }
        .theme-critical .ord-sum-icon { color: #dc2626; }
        .theme-shipped .ord-sum-icon { color: #16a34a; }
        .theme-due .ord-sum-icon { color: #d97706; }
        .theme-payment .ord-sum-icon { color: #2563eb; }
        .theme-fit .ord-sum-icon { color: #7c3aed; }

        .ord-sum-body { flex: 1; width: 100%; }

        .ord-sum-label {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .ord-sum-value {
            font-size: 36px;
            font-weight: 700;
            line-height: 1.1;
            margin-top: 4px;
            color: var(--text);
        }
        .theme-active .ord-sum-value { color: var(--gold); }
        .theme-critical .ord-sum-value { color: #dc2626; }
        .theme-shipped .ord-sum-value { color: #16a34a; }
        .theme-due .ord-sum-value { color: #d97706; }
        .theme-payment .ord-sum-value { color: #2563eb; }
        .theme-fit .ord-sum-value { color: #7c3aed; }

        .ord-outstanding {
            margin-top: 10px;
            padding: 10px 12px;
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid rgba(37, 99, 235, 0.2);
            border-radius: 10px;
            width: 100%;
        }
        .ord-outstanding-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .ord-outstanding-amount {
            font-size: 22px;
            font-weight: 700;
            color: #dc2626;
            margin-top: 2px;
            line-height: 1.2;
        }
        .ord-outstanding-meta {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .ord-sum-meta {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .ord-sum-meta .meta-overdue { color: #dc2626; font-weight: 600; }
        .ord-sum-meta .meta-due-soon { color: #d97706; font-weight: 600; }
        .ord-sum-meta .meta-up { color: #16a34a; font-weight: 600; }
        .ord-sum-meta .meta-down { color: #dc2626; font-weight: 600; }

        .ord-sum-cta {
            font-size: 12px;
            font-weight: 600;
            color: var(--gold);
            margin-top: auto;
        }

        /* ── Orders Analytics ── */
        .ord-analytics-row {
            display: grid;
            grid-template-columns: 1fr 1.2fr 1fr;
            gap: 16px;
            margin-bottom: 8px;
        }

        .ord-analytics-card {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px 22px;
            display: flex;
            flex-direction: column;
            min-height: 280px;
        }

        .ord-analytics-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
        }

        .ord-analytics-footer {
            margin-top: auto;
            padding-top: 12px;
            font-size: 11px;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
        }

        .ord-overview-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
        }

        .ord-overview-list li {
            display: grid;
            grid-template-columns: 1fr 56px 40px;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(151, 21, 34, 0.08);
        }

        .ord-overview-list li.ov-total {
            border-bottom: none;
            margin-top: 4px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            grid-template-columns: 1fr 40px;
        }

        .ord-overview-list .ov-label {
            font-size: 13px;
            color: var(--text);
        }
        .ord-overview-list .ov-total .ov-label {
            font-weight: 700;
        }
        .ord-overview-list .ov-count {
            font-size: 14px;
            font-weight: 700;
            text-align: right;
            color: var(--text);
        }
        .ord-overview-list .ov-spark svg {
            width: 56px;
            height: 22px;
            display: block;
        }

        .ord-donut-wrap {
            display: flex;
            align-items: center;
            gap: 18px;
            flex: 1;
        }

        .ord-donut {
            position: relative;
            width: 140px;
            height: 140px;
            flex-shrink: 0;
        }
        .ord-donut svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .ord-donut-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .ord-donut-num {
            font-size: 26px;
            font-weight: 700;
            color: var(--text);
            line-height: 1;
        }
        .ord-donut-sub {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
            text-align: center;
            max-width: 72px;
            line-height: 1.2;
        }

        .ord-donut-legend {
            list-style: none;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 7px;
            max-height: 180px;
            overflow-y: auto;
        }
        .ord-donut-legend li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text);
        }
        .ord-donut-legend .leg-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .ord-donut-legend .leg-label {
            flex: 1;
            color: var(--text-muted);
        }
        .ord-donut-legend .leg-count {
            font-weight: 600;
        }

        .ord-bar-chart {
            flex: 1;
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 8px 0 0;
            min-height: 160px;
        }
        .ord-bar-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            height: 100%;
            justify-content: flex-end;
        }
        .ord-bar-val {
            font-size: 11px;
            font-weight: 600;
            color: var(--text);
            min-height: 14px;
        }
        .ord-bar {
            width: 100%;
            max-width: 36px;
            border-radius: 6px 6px 2px 2px;
            background: var(--gold);
            min-height: 4px;
            transition: height .3s ease;
        }
        .ord-bar-label {
            font-size: 10px;
            color: var(--text-muted);
            text-align: center;
            line-height: 1.25;
        }

        .ord-detail-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .ord-detail-title {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            color: var(--text);
            margin: 0;
        }
        .ord-detail-count {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            background: #2563eb;
            border-radius: 100px;
            padding: 3px 10px;
            min-width: 28px;
            text-align: center;
        }

        .ord-back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            color: var(--gold);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
            margin-bottom: 8px;
            font-family: inherit;
        }
        .ord-back-link:hover { opacity: 0.8; }

        .ord-mgmt-title-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ord-view-toggle {
            display: flex;
            background: var(--navy-light);
            border-radius: 8px;
            padding: 2px;
            border: 1px solid var(--border);
        }
        .ord-view-toggle .btn {
            border: none;
            margin: 0;
            background: transparent;
            font-weight: 500;
            color: var(--text-muted);
        }
        .ord-view-toggle .btn.active {
            background: var(--gold);
            color: #fff;
            font-weight: 600;
        }

        .ord-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            background: var(--navy-card);
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 4px;
        }
        .ord-filter-bar .form-input {
            padding: 8px 12px;
            font-size: 13px;
            min-width: 140px;
        }
        .ord-filter-bar #orders-search {
            flex: 1;
            min-width: 200px;
        }

        /* ── Kanban Board ── */
        .kanban-board {
            display: grid;
            grid-template-columns: repeat(5, minmax(220px, 1fr));
            gap: 14px;
            align-items: start;
            overflow-x: auto;
            padding-bottom: 8px;
        }

        .kanban-col {
            background: #f7f4f2;
            border: 1px solid var(--border);
            border-radius: 12px;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            transition: border-color .15s, background .15s;
        }
        .kanban-col.drag-over {
            border-color: var(--gold);
            background: #f3e8ea;
        }

        .kanban-col-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            border-top: 3px solid var(--gold);
            border-radius: 12px 12px 0 0;
            background: #fff;
        }
        .kanban-col-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--text);
        }
        .kanban-col-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }
        .kanban-col-count {
            background: var(--navy-light);
            color: var(--text);
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            min-width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
        }

        .kanban-col-body {
            padding: 10px;
            flex: 1;
            overflow-y: auto;
            max-height: calc(100vh - 340px);
            min-height: 200px;
        }

        .kanban-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 10px;
            cursor: grab;
            transition: box-shadow .15s, transform .15s, opacity .15s;
        }
        .kanban-card:hover {
            box-shadow: 0 6px 18px rgba(28, 16, 16, 0.08);
            transform: translateY(-1px);
        }
        .kanban-card.dragging { opacity: 0.55; cursor: grabbing; }
        .kanban-card.dragging-ghost { opacity: 0.35; }

        .kanban-card-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 4px;
        }
        .kanban-order-no {
            font-size: 13px;
            color: var(--text);
            word-break: break-all;
        }
        .kanban-manual-badge {
            font-size: 10px;
            background: #3b82f622;
            color: #2563eb;
            border: 1px solid #3b82f644;
            border-radius: 4px;
            padding: 1px 6px;
            font-weight: 600;
            white-space: nowrap;
        }
        .kanban-client {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 2px;
        }
        .kanban-note {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 8px;
            line-height: 1.35;
        }
        .kanban-due-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(151, 21, 34, 0.08);
        }
        .kanban-urgency {
            font-weight: 700;
            font-size: 10px;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .kanban-urgency.overdue { color: #dc2626; }
        .kanban-urgency.soon { color: #d97706; }
        .kanban-urgency.ok { color: #16a34a; }

        .kanban-meta-row {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .kanban-meta-val { font-weight: 600; }
        .kanban-meta-val.ok { color: #16a34a; }
        .kanban-meta-val.warn { color: #d97706; }
        .kanban-meta-val.bad { color: #dc2626; }
        .kanban-meta-val.muted { color: var(--text-muted); }
        .kanban-meta-val.value { color: #16a34a; font-weight: 700; }

        .kanban-outstanding {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 10px 8px;
            padding: 10px 12px;
            background: #fff5f5;
            border: 1px solid rgba(220, 38, 38, 0.2);
            border-radius: 10px;
        }
        .kanban-outstanding-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #fee2e2;
            color: #dc2626;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
            flex-shrink: 0;
        }
        .kanban-outstanding-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .kanban-outstanding-row {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
        }
        .kanban-outstanding-amount {
            font-size: 18px;
            font-weight: 700;
            color: #dc2626;
        }
        .kanban-outstanding-count {
            font-size: 11px;
            color: var(--text-muted);
        }

        .kanban-shipped-extra {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(151, 21, 34, 0.08);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .kanban-delivered {
            font-size: 11px;
            font-weight: 600;
            color: #16a34a;
        }
        .kanban-tracking {
            font-size: 11px;
            color: #2563eb;
            word-break: break-all;
        }

        .kanban-view-link {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 6px 0 0;
            background: none;
            border: none;
            border-top: 1px solid rgba(151, 21, 34, 0.08);
            color: var(--gold);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            font-family: inherit;
        }
        .kanban-view-link:hover { opacity: 0.8; }

        .kanban-empty {
            font-size: 12px;
            color: var(--text-muted);
            text-align: center;
            padding: 24px 8px;
            opacity: 0.7;
        }

        .kanban-drop-hint {
            border: 1.5px dashed rgba(151, 21, 34, 0.25);
            border-radius: 8px;
            padding: 14px 10px;
            text-align: center;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .kanban-drop-hint span {
            display: block;
            font-size: 18px;
            font-weight: 300;
            line-height: 1;
            margin-bottom: 4px;
            color: var(--gold);
        }
        .kanban-drop-hint small {
            font-size: 10px;
            line-height: 1.3;
        }

        .kanban-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .kanban-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }
        .kanban-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .kanban-total {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }

        .ord-all-section {
            margin-top: 28px;
        }
        .ord-all-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }
        .ord-all-title {
            font-family: 'Playfair Display', serif;
            font-size: 20px;
            color: var(--text);
            margin: 0;
        }
        .ord-all-count {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            background: var(--gold);
            border-radius: 100px;
            padding: 3px 10px;
            min-width: 28px;
            text-align: center;
        }

        @media (max-width: 1200px) {
            .kanban-board {
                grid-template-columns: repeat(5, 240px);
            }
        }
        @media (max-width: 1100px) {
            .ord-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .ord-analytics-row {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 640px) {
            .ord-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── Login ── */
        .login-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: var(--navy);
        }
        .login-box {
            background: var(--navy-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 40px;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        .login-box h1 {
            font-family: 'Playfair Display', serif;
            color: var(--gold);
            margin-bottom: 8px;
            font-size: 24px;
        }
        .login-box p {
            color: var(--text-muted);
            font-size: 14px;
            margin-bottom: 24px;
        }
        .login-box .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        /* ── Order lookup ── */
        .lookup-wrap { position: relative; margin-bottom: 20px; }
        .lookup-icon { position: absolute; left: 16px; top: 15px; color: var(--text-muted); pointer-events: none; }
        .lookup-input { width: 100%; padding: 14px 16px 14px 44px; font-size: 15px; border-radius: 12px; }
        .lookup-results {
            display: none; position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
            background: var(--navy-card); border: 1px solid var(--border); border-radius: 12px;
            box-shadow: 0 12px 32px rgba(28, 16, 16, .12); max-height: 420px; overflow-y: auto;
        }
        .lookup-results.open { display: block; }
        .lookup-item {
            display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
            padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--border);
            text-align: left; font: inherit; color: var(--text); cursor: pointer;
        }
        .lookup-item:hover, .lookup-item.active { background: var(--navy-light); }
        .lookup-eta { text-align: right; flex-shrink: 0; }
        .lookup-empty { padding: 14px 16px; color: var(--text-muted); font-size: 13px; }

        /* ── Type, ETA and review badges ── */
        .type-badge {
            display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px;
            border-radius: 4px; padding: 1px 6px; vertical-align: middle; border: 1px solid; white-space: nowrap;
        }
        .type-badge.china { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
        .type-badge.india { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
        .eta-cell { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
        .eta-sub { font-size: 11px; color: var(--text-muted); }
        .eta-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
        .eta-dot.ok { background: var(--success); }
        .eta-dot.bad { background: var(--error); }
        .review-tag {
            display: inline-block; font-size: 11px; font-weight: 600; border-radius: 100px;
            padding: 2px 9px; background: var(--navy-light); color: var(--text-muted);
        }
        .review-tag.ok { background: #dcfce7; color: #166534; }
        .review-tag.urgent { background: #fee2e2; color: #991b1b; }
        .link-btn {
            background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
            color: var(--gold); cursor: pointer; text-decoration: underline;
        }
        .link-btn.strong { font-size: 14px; font-weight: 700; text-decoration: none; }
        .form-input.form-input-sm { padding: 5px 8px; font-size: 12px; }

        /* ── Dashboard panels ── */
        .panel-help { font-size: 12px; color: var(--text-muted); padding: 12px 24px 0; margin: 0; line-height: 1.5; }
        .panel-scroll { max-height: 360px; overflow: auto; }
        .empty-line { padding: 16px 0; color: var(--text-muted); font-size: 13px; }
        .delay-list { padding: 8px 24px 16px; }
        .delay-list > .link-btn { margin-top: 10px; }
        .delay-row {
            display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
            padding: 12px 0; border-bottom: 1px solid var(--border);
        }
        .delay-row.reviewed { opacity: .7; }
        .delay-reason { font-size: 13px; color: var(--error); margin-top: 3px; }
        .delay-review { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
        .dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
        .pay-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 24px; }
        .pay-total { background: var(--navy-light); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
        .pay-total span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
        .pay-total strong { font-size: 17px; }
        .pay-total small { font-size: 11px; color: var(--text-muted); }

        /* ── Progress modal ── */
        .pg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
        .pg-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
        .pg-eta { text-align: right; flex-shrink: 0; }
        .pg-eta-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
        .pg-eta-value { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: var(--text); }
        .pg-eta-status { font-size: 12px; font-weight: 700; }
        .pg-eta-status.ok { color: var(--success); }
        .pg-eta-status.bad { color: var(--error); }
        .pg-eta-status.muted { color: var(--text-muted); }
        .pg-bar { height: 8px; background: var(--navy-light); border-radius: 100px; margin: 16px 0 8px; overflow: hidden; }
        .pg-bar-fill { height: 100%; background: var(--success); border-radius: 100px; transition: width .3s; }
        .pg-bar-fill.bad { background: var(--error); }
        .pg-bar-fill.muted { background: var(--text-muted); }
        .pg-now { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
        .pg-h { font-size: 14px; font-weight: 700; margin: 20px 0 4px; }
        .pg-help { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
        .pg-delay-box {
            display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
            background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #7f1d1d;
        }
        .pg-steps { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
        .pg-step {
            display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center;
            padding: 10px 14px; border-bottom: 1px solid var(--border);
        }
        .pg-step:last-child { border-bottom: 0; }
        .pg-step input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; }
        .pg-step.done .pg-step-label { color: var(--text-muted); }
        .pg-step.current { background: #fffbeb; }
        .pg-step.current.late { background: #fef2f2; }
        .pg-step-label { font-size: 14px; font-weight: 500; }
        .pg-step-meta { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
        .pg-step-meta .late { color: var(--error); font-weight: 700; }
        .pg-std { opacity: .7; }
        .pg-box { background: var(--navy-light); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
        .pg-supplier-last { font-size: 13px; margin-bottom: 10px; }
        .pg-email-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
        .pg-warn { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #9a3412; margin-bottom: 8px; }

        /* ── Settings timelines ── */
        .timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 24px 24px; }
        .timeline-col h4 { font-size: 14px; margin: 0 0 8px; }

        @media (max-width: 1100px) {
            .dash-two-col, .timeline-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            .pay-totals { grid-template-columns: 1fr 1fr; }
            .delay-row, .pg-head, .pg-delay-box { flex-direction: column; }
            .delay-review, .pg-eta { align-items: flex-start; text-align: left; }
            .pg-step { grid-template-columns: 24px 1fr; }
            .pg-step input[type="date"] { grid-column: 2; }
        }