/* ─── Premium Dark Theme — Warm & Refined ──────────────── */
:root {
    --bg-primary: #0c0e14;
    --bg-secondary: #11131b;
    --bg-tertiary: #161825;
    --bg-card: rgba(255, 255, 255, 0.025);
    --bg-card-hover: rgba(255, 255, 255, 0.045);
    --bg-input: rgba(255, 255, 255, 0.04);
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-focus: rgba(168, 139, 250, 0.5);
    --text-primary: #f0f0f5;
    --text-secondary: #9199b0;
    --text-muted: #515872;
    --accent: #a78bfa;
    --accent-hover: #8b5cf6;
    --accent-glow: rgba(139, 92, 246, 0.2);
    --accent-glow-strong: rgba(139, 92, 246, 0.35);
    --gradient: linear-gradient(135deg, #8b5cf6, #a78bfa);
    --gradient-hover: linear-gradient(135deg, #a78bfa, #c4b5fd);
    --gradient-subtle: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,139,250,0.04));
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --terminal-bg: #060810;
    --terminal-text: #b0b8d4;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: 0.2s ease;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Category colors — warm balanced */
    --cat-curier: #60a5fa;
    --cat-imagini: #f472b6;
    --cat-magazin: #2dd4bf;
    --cat-pdf: #fb923c;
    --cat-barcode: #c084fc;
    --cat-trendyol: #fbbf24;
    --cat-rapoarte: #818cf8;
    --cat-altele: #94a3b8;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
    position: relative;
}
/* Ambient background — soft mesh gradient */
#starfield {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(139,92,246,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 80%, rgba(96,165,250,0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 0%, rgba(168,139,250,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 40%, rgba(244,114,182,0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* ─── LOGIN ─────────────────────────────────────────────── */
.login-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(99,102,241,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(139,92,246,0.08) 0%, transparent 50%);
    overflow: hidden;
}
.login-card {
    background: rgba(8,10,22,0.8);
    border: 1px solid rgba(100,140,255,0.15);
    border-radius: 20px;
    padding: 52px 44px;
    text-align: center;
    width: 400px;
    position: relative; z-index: 1;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 80px rgba(90,50,180,0.15), 0 0 120px var(--accent-glow);
    animation: loginAppear 0.7s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter: blur(30px);
}
@keyframes loginAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo {
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
}
.login-logo svg { filter: drop-shadow(0 0 16px rgba(99,102,241,0.3)); }
.login-card h1 {
    font-size: 24px; font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}
.login-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 32px; }
.login-field { margin-bottom: 18px; }
.login-field input {
    width: 100%; padding: 14px 18px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-primary);
    font-family: var(--font-sans); font-size: 15px; outline: none;
    transition: var(--transition); text-align: center; letter-spacing: 0.18em;
}
.login-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow), inset 0 0 20px rgba(90,120,240,0.05); }
.btn-login {
    width: 100%; padding: 14px; background: var(--gradient); color: white;
    border: none; border-radius: var(--radius); font-family: var(--font-sans);
    font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 24px var(--accent-glow);
}
.btn-login:hover { background: var(--gradient-hover); transform: translateY(-2px); box-shadow: 0 8px 32px var(--accent-glow-strong); }
.login-error { color: var(--error); font-size: 12px; margin-top: 12px; min-height: 18px; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT — Command Center
   ═══════════════════════════════════════════════════════════════ */
.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ─── Top Bar ───────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: rgba(11,15,25,0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}


.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.topbar-logo-wrap {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient);
    border-radius: 8px;
}
.topbar-brand h1 {
    font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
}

.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 480px;
    margin: 0 24px;
}
.topbar-search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.topbar-search-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--accent);
    color: var(--text-secondary);
    box-shadow: 0 0 20px rgba(90,120,240,0.08);
}
.topbar-search-icon { font-size: 14px; }
.topbar-search-text { flex: 1; text-align: left; }
.topbar-search-btn kbd {
    display: inline-block; padding: 2px 7px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px; font-family: var(--font-mono);
    font-size: 10px; color: var(--text-muted);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
/* Running task indicator */
.topbar-task {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 20px;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.15);
    font-size: 12px; color: var(--warning);
    cursor: pointer; transition: var(--transition);
    max-width: 240px;
}
.topbar-task:hover { background: rgba(251,191,36,0.12); }
.topbar-task-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--warning); flex-shrink: 0;
    animation: pulse-dot 1.5s infinite;
}
.topbar-task-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Legacy / hidden elements */
.topbar-stats { display: none; }
.topbar-divider { display: none; }
.topbar-server { display: none; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.status-dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.offline { background: var(--error); box-shadow: 0 0 8px var(--error); }

.topbar-user-mgmt {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted); padding: 6px 8px; cursor: pointer;
    transition: var(--transition);
}
.topbar-user-mgmt svg { display: block; }
.topbar-user-mgmt:hover { color: var(--accent); border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); }

.topbar-logout {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted); padding: 6px 8px; cursor: pointer;
    transition: var(--transition);
}
.topbar-logout svg { display: block; }
.topbar-logout:hover { color: var(--error); border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.06); }

/* ─── Command Palette ───────────────────────────────────── */
.cmd-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18vh;
}
.cmd-overlay.open {
    display: flex;
}
@keyframes cmdSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd-palette {
    width: 580px;
    max-width: 92vw;
    background: rgba(10,14,30,0.98);
    border: 1px solid rgba(90,120,240,0.2);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 80px rgba(90,120,240,0.08);
    overflow: hidden;
    animation: cmdSlideIn 0.2s ease;
    backdrop-filter: blur(20px);
}
.cmd-search-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmd-search-icon { font-size: 20px; flex-shrink: 0; }
#cmdInput {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 17px;
    font-family: var(--font-sans);
    font-weight: 500;
    outline: none;
}
#cmdInput::placeholder { color: var(--text-muted); font-weight: 400; }
.cmd-esc {
    display: inline-block; padding: 3px 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px; font-family: var(--font-mono);
    font-size: 10px; color: var(--text-muted); flex-shrink: 0;
}
.cmd-results {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.cmd-category-header {
    padding: 10px 22px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: sticky;
    top: 0;
}
.cmd-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.cmd-item:hover, .cmd-item.active {
    background: rgba(90,120,240,0.1);
}
.cmd-item:last-child { border-bottom: none; }
.cmd-item-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--accent);
}
.cmd-item-info { flex: 1; min-width: 0; }
.cmd-item-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.cmd-item-desc {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.cmd-item-cat {
    margin-left: auto;
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.cmd-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.cmd-empty-icon { font-size: 32px; margin-bottom: 8px; }
.cmd-hint {
    padding: 12px 22px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    gap: 16px;
    opacity: 0.6;
}
.cmd-hint kbd {
    display: inline-block; padding: 1px 5px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; font-family: var(--font-mono);
    font-size: 9px; margin: 0 2px;
}

/* ─── Main Area ─────────────────────────────────────────── */
.main-area {
    flex: 1;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
    will-change: scroll-position;
}

/* ─── Grid View ─────────────────────────────────────────── */
.grid-view {
    padding: 36px 40px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    animation: gridAppear 0.5s ease;
}
@keyframes gridAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}
.grid-welcome {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
}
.grid-welcome h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.grid-welcome p {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto;
}
.grid-welcome-hint {
    margin-top: 14px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
}
.grid-welcome-hint kbd {
    display: inline-block; padding: 2px 7px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    border-radius: 5px; font-family: var(--font-mono);
    font-size: 10px; color: var(--text-secondary);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}

.grid-category {
    margin-bottom: 36px;
}
.grid-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.grid-category-icon {
    font-size: 22px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.grid-category-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}
.grid-category-count {
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    font-weight: 800;
    color: var(--text-muted);
}
.grid-category-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.04);
}

/* Per-category accent colors */
.grid-category[data-cat="Curier"] .grid-category-name { color: var(--cat-curier); }
.grid-category[data-cat="Curier"] .grid-category-icon { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); }
.grid-category[data-cat="Imagini"] .grid-category-name { color: var(--cat-imagini); }
.grid-category[data-cat="Imagini"] .grid-category-icon { background: rgba(244,114,182,0.1); border-color: rgba(244,114,182,0.2); }
.grid-category[data-cat="Magazin"] .grid-category-name { color: var(--cat-magazin); }
.grid-category[data-cat="Magazin"] .grid-category-icon { background: rgba(45,212,191,0.1); border-color: rgba(45,212,191,0.2); }
.grid-category[data-cat="PDF"] .grid-category-name { color: var(--cat-pdf); }
.grid-category[data-cat="PDF"] .grid-category-icon { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.2); }
.grid-category[data-cat="Barcode"] .grid-category-name { color: var(--cat-barcode); }
.grid-category[data-cat="Barcode"] .grid-category-icon { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.2); }
.grid-category[data-cat="Trendyol"] .grid-category-name { color: var(--cat-trendyol); }
.grid-category[data-cat="Trendyol"] .grid-category-icon { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
.grid-category[data-cat="Altele"] .grid-category-name { color: var(--cat-altele); }

/* Flat grid layout — all cards in one grid */
.grid-cards-flat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.grid-card {
    position: relative;
    padding: 20px 22px 18px;
    background: rgba(10, 14, 30, 0.82);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    overflow: hidden;
    border-top: 3px solid var(--card-accent, rgba(255,255,255,0.1));
    will-change: transform;
    contain: layout style;
}
.grid-card::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: inherit;
}
.grid-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.14);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.35),
        0 0 30px var(--card-glow, rgba(90,120,240,0.08));
    background: rgba(14, 18, 36, 0.92);
}
.grid-card:hover::before {
    opacity: 0.04;
}
.grid-card:active {
    transform: translateY(-2px);
}

/* Category tag on each card */
.grid-card-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--card-tag, var(--text-muted));
    margin-bottom: 10px;
    position: relative; z-index: 1;
    opacity: 0.7;
}

.grid-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.grid-card-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative; z-index: 1;
    transition: var(--transition);
    color: var(--card-tag, var(--text-muted));
}
.grid-card:hover .grid-card-icon {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 0 20px var(--card-glow, rgba(90,120,240,0.1));
}
.grid-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    position: relative; z-index: 1;
    line-height: 1.3;
}
.grid-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    position: relative; z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Staggered grid card animation */
.grid-card { animation: cardAppear 0.4s ease both; }
.grid-card:nth-child(1) { animation-delay: 0.02s; }
.grid-card:nth-child(2) { animation-delay: 0.04s; }
.grid-card:nth-child(3) { animation-delay: 0.06s; }
.grid-card:nth-child(4) { animation-delay: 0.08s; }
.grid-card:nth-child(5) { animation-delay: 0.10s; }
.grid-card:nth-child(6) { animation-delay: 0.12s; }
.grid-card:nth-child(7) { animation-delay: 0.14s; }
.grid-card:nth-child(8) { animation-delay: 0.16s; }
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hub card badge */
.grid-card-hub {
    border-left-width: 3px;
    border-left-style: solid;
}
.grid-card-tabs {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(90,120,240,0.12);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* ─── Tool Tab Bar ──────────────────────────────────────── */
.tool-tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.25);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    scrollbar-width: none;
}
.tool-tabs::-webkit-scrollbar { display: none; }
.tool-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.tool-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
}
.tool-tab.active {
    color: var(--text-primary);
    background: rgba(90,120,240,0.15);
    border: 1px solid rgba(90,120,240,0.25);
    box-shadow: 0 0 20px rgba(90,120,240,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tool-tab-icon {
    font-size: 15px;
    line-height: 1;
}
.tool-tab-label {
    line-height: 1;
}
.tool-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f59e0b;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    animation: badgePop 0.3s ease;
}
@keyframes badgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Rapoarte category color */
.grid-category[data-cat="Rapoarte"] .grid-category-name { color: rgb(96,165,250); }
.grid-category[data-cat="Rapoarte"] .grid-category-icon { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); }

/* ─── Script View ───────────────────────────────────────── */
.script-view {
    padding: 32px 40px;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    animation: scriptSlideIn 0.35s ease;
}
.script-view:has(.ty-wizard) { max-width: 100%; }
.script-view:has(.ts-module), .script-view:has(.ta-module), .script-view:has(.tr-module), .script-view:has(.tq-module) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.awb-center), .script-view:has(.dpd-module) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.awb-center) .form-section,
.script-view:has(.dpd-module) .form-section {
    background: none; border: none; border-radius: 0; padding: 0;
    backdrop-filter: none; box-shadow: none; overflow: visible;
}
.script-view:has(.awb-center) .form-section::before,
.script-view:has(.dpd-module) .form-section::before { display: none; }
@keyframes scriptSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 28px;
}
.btn-back:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
    border-color: var(--accent);
    transform: translateX(-4px);
    box-shadow: 0 0 16px rgba(90,120,240,0.1);
}
.btn-back-arrow {
    font-size: 16px;
    transition: var(--transition);
}
.btn-back:hover .btn-back-arrow {
    transform: translateX(-3px);
}

/* ─── Monitor Bar ───────────────────────────────────────── */
.monitor-bar { padding: 0 40px; flex-shrink: 0; }
.monitor-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; background: var(--warning-bg); border-radius: 20px;
    font-size: 12px; font-weight: 600; color: var(--warning); margin-top: 12px;
    border: 1px solid rgba(251,191,36,0.25);
    box-shadow: 0 0 20px rgba(251,191,36,0.1);
}
.monitor-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); animation: pulse-dot 1s infinite; }

/* ─── Content Header ────────────────────────────────────── */
.content-header { margin-bottom: 28px; }
.header-top { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.header-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-subtle);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    color: var(--accent);
    position: relative;
}
.header-icon::after {
    content: ''; position: absolute; inset: -1px;
    border-radius: inherit;
    background: var(--gradient);
    opacity: 0.15; z-index: -1;
    filter: blur(8px);
}
.header-top h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.header-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.header-category {
    display: inline-block; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent); background: rgba(90,120,240,0.12);
    padding: 3px 12px; border-radius: 20px;
    border: 1px solid rgba(90,120,240,0.2);
}
.header-params {
    font-size: 11px; color: var(--text-muted); font-weight: 500;
}
.header-desc {
    font-size: 14px; color: var(--text-secondary);
    margin-top: 12px; line-height: 1.7; max-width: 620px;
}

/* ─── Form ──────────────────────────────────────────────── */
.form-section {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}
.form-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--gradient);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.form-empty {
    text-align: center; padding: 36px 0;
    color: var(--text-muted); font-size: 14px;
}
.form-grid { display: grid; gap: 22px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary); letter-spacing: 0.02em;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.form-group label .required { color: var(--error); margin-left: 4px; font-size: 14px; }
.form-input, .form-select, textarea.form-input {
    width: 100%; padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    color: var(--text-primary); font-family: var(--font-sans); font-size: 13px;
    outline: none; transition: all 0.2s;
}
textarea.form-input { resize: vertical; min-height: 70px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.form-input:focus, .form-select:focus, textarea.form-input:focus {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
    background: rgba(255,255,255,0.06);
}
.form-input::placeholder { color: var(--text-muted); }
.input-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.form-select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

/* File upload */
.file-drop {
    border: 2px dashed rgba(90,120,240,0.25); border-radius: var(--radius);
    padding: 28px; text-align: center; cursor: pointer; transition: var(--transition);
    position: relative; overflow: hidden;
    background: rgba(90,120,240,0.03);
}
.file-drop:hover {
    border-color: var(--accent); background: rgba(90,120,240,0.06);
    box-shadow: 0 0 30px rgba(90,120,240,0.08);
}
.file-drop.dragover {
    border-color: var(--accent); background: var(--accent-glow);
    animation: dropPulse 1s ease infinite;
    box-shadow: 0 0 40px rgba(90,120,240,0.15);
}
@keyframes dropPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 14px transparent; } }
.file-drop-icon { font-size: 30px; margin-bottom: 8px; filter: grayscale(0.3); }
.file-drop-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.file-drop-text strong { color: var(--accent); font-weight: 600; }
.file-drop-text small { color: var(--text-muted); font-size: 11px; }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.file-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.file-summary {
    width: 100%; font-size: 11px; color: var(--accent);
    margin-bottom: 4px; font-weight: 600;
}
.file-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; background: rgba(90,120,240,0.08); border: 1px solid rgba(90,120,240,0.2);
    border-radius: 20px; font-size: 12px; color: var(--text-secondary);
    animation: fadeIn 0.2s ease;
}
.file-tag .file-size { color: var(--text-muted); font-size: 10px; }
.file-tag .remove-file {
    cursor: pointer; color: var(--text-muted); font-size: 14px;
    line-height: 1; transition: var(--transition);
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.file-tag .remove-file:hover { color: var(--error); background: rgba(248,113,113,0.15); }

/* Custom Checkbox */
.checkbox-wrap {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: rgba(0,0,0,0.15); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.checkbox-wrap:hover { border-color: var(--accent); background: rgba(90,120,240,0.04); }
.checkbox-wrap input[type="checkbox"] { display: none; }
.checkbox-custom {
    width: 20px; height: 20px; border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition); flex-shrink: 0;
}
.checkbox-wrap input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
.checkbox-wrap input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓'; color: white; font-size: 12px; font-weight: 800;
}
.checkbox-wrap span:last-child { font-size: 13px; color: var(--text-primary); user-select: none; font-weight: 500; }

/* Submit button */
.form-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; }
.btn-run {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px;
    background: rgba(139,92,246,0.12); color: #c4b5fd;
    border: 1px solid rgba(139,92,246,0.3); border-radius: 10px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.25s ease;
    position: relative; overflow: hidden;
}
.btn-run:hover { background: rgba(139,92,246,0.2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(139,92,246,0.15); }
.btn-run:active { transform: translateY(0); }
.btn-run:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-run .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #c4b5fd; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-clear {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    color: var(--text-secondary); padding: 10px 20px; font-family: var(--font-sans);
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-clear:hover { border-color: rgba(255,255,255,0.15); color: var(--text-primary); background: rgba(255,255,255,0.08); }

.btn-sm {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    color: var(--text-secondary); padding: 6px 14px; font-family: var(--font-sans);
    font-size: 12px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; font-weight: 500;
}
.btn-sm:hover { border-color: rgba(255,255,255,0.15); color: var(--text-primary); background: rgba(255,255,255,0.08); }

.form-shortcut-hint {
    font-size: 11px; color: var(--text-muted); margin-left: auto; opacity: 0.6;
}
.form-shortcut-hint kbd { margin: 0 1px; }

/* ─── Product Browser ──────────────────────────────────── */
.product-browser {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(0,0,0,0.2);
}
.product-toolbar {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.product-list {
    max-height: 300px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.product-item {
    display: flex; align-items: center; padding: 8px 12px;
    gap: 8px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: var(--transition);
}
.product-item:hover { background: rgba(255,255,255,0.04); }
.product-item:last-child { border-bottom: none; }
.product-img {
    width: 32px; height: 32px; object-fit: cover;
    border-radius: 5px; flex-shrink: 0;
    border: 1px solid var(--border);
}
.product-info { flex: 1; min-width: 0; }
.product-sku { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.product-title {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-barcode { font-size: 10px; flex-shrink: 0; font-weight: 600; }
.product-barcode.has { color: var(--success); }
.product-barcode.missing { color: var(--warning); }
.product-loading, .product-error {
    padding: 24px; text-align: center;
    color: var(--text-muted); font-size: 13px;
}
.product-error { color: var(--error); }
.product-paging { padding: 8px 12px; text-align: center; }
.product-all-loaded { font-size: 11px; color: var(--text-muted); }
.product-count {
    padding: 6px 12px; font-size: 11px; color: var(--text-muted);
    border-top: 1px solid var(--border); font-weight: 500;
}

/* ─── Debug Panel ───────────────────────────────────────── */
.debug-panel {
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
}
.debug-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; cursor: pointer; font-size: 12px; color: var(--text-muted);
    transition: var(--transition);
}
.debug-header:hover { background: rgba(255,255,255,0.03); }
.debug-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.debug-content {
    padding: 0 14px 10px; font-family: var(--font-mono); font-size: 11px;
    color: var(--text-muted); line-height: 1.6; display: none;
}
.debug-content.open { display: block; }
.debug-content p { margin: 2px 0; }
.debug-content code {
    background: rgba(90,120,240,0.1); padding: 1px 6px;
    border-radius: 4px; font-size: 10px; color: var(--accent);
}

/* ─── Log Section ───────────────────────────────────────── */
.log-section { margin-top: 24px; animation: fadeIn 0.3s ease; }
.log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.log-header h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.log-icon { font-size: 18px; }
.log-actions { display: flex; gap: 8px; align-items: center; }
.status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.status-badge.running {
    background: var(--warning-bg); color: var(--warning);
    animation: pulse-badge 1.5s infinite;
    border: 1px solid rgba(251,191,36,0.25);
    box-shadow: 0 0 16px rgba(251,191,36,0.1);
}
.status-badge.completed {
    background: var(--success-bg); color: var(--success);
    border: 1px solid rgba(52,211,153,0.25);
    box-shadow: 0 0 16px rgba(52,211,153,0.1);
}
.status-badge.failed {
    background: var(--error-bg); color: var(--error);
    border: 1px solid rgba(248,113,113,0.25);
    box-shadow: 0 0 16px rgba(248,113,113,0.1);
}
@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.log-terminal {
    background: var(--terminal-bg); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    color: var(--terminal-text); max-height: 400px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
    white-space: pre-wrap; word-break: break-all;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.log-line { padding: 1px 0; animation: logLine 0.15s ease; }
@keyframes logLine { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.log-line.error { color: var(--error); }
.log-line.success { color: var(--success); }
.log-line.info { color: var(--accent); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.log-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 14px;
    font-size: 11px; color: var(--text-muted);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
.log-footer-actions { display: flex; gap: 4px; }
.log-footer-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); cursor: pointer;
    font-size: 12px; padding: 4px 12px; border-radius: 5px; color: #ffffff;
    transition: var(--transition); opacity: 0.9; font-weight: 600;
}
.log-footer-btn:hover { opacity: 1; background: rgba(255,255,255,0.2); }

/* ─── Output Files ──────────────────────────────────────── */
.output-files {
    margin-top: 16px; padding: 20px;
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: var(--radius); animation: fadeIn 0.3s ease;
}
.output-files h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--text-secondary); }
.files-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.file-download {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 500;
    transition: var(--transition);
}
.file-download:hover {
    border-color: var(--accent); background: rgba(90,120,240,0.08);
    color: var(--accent); transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(90,120,240,0.1);
}
.file-dl-arrow { color: var(--text-muted); font-size: 12px; transition: var(--transition); }
.file-download:hover .file-dl-arrow { color: var(--accent); transform: translateY(1px); }

.download-hero { margin-bottom: 14px; }
.btn-download-main {
    display: flex; align-items: center; gap: 16px;
    width: 100%; padding: 18px 22px;
    background: var(--gradient); color: white;
    text-decoration: none; border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px var(--accent-glow);
    transition: var(--transition);
    position: relative; overflow: hidden;
}
.btn-download-main::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.btn-download-main:hover { transform: translateY(-2px); box-shadow: 0 12px 40px var(--accent-glow-strong); }
.btn-download-main-icon { font-size: 24px; line-height: 1; }
.btn-download-main strong { display: block; font-size: 15px; font-weight: 700; }
.btn-download-main small { display: block; margin-top: 2px; font-size: 12px; opacity: 0.85; }

.output-subtitle {
    margin: 12px 0 10px; font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}

/* ─── Toast Notifications ───────────────────────────────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 3000; display: flex; flex-direction: column-reverse; gap: 10px; }
.toast {
    padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
    color: var(--text-primary); min-width: 280px; max-width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: toastIn 0.35s cubic-bezier(0.4,0,0.2,1), toastOut 0.35s ease 4.1s forwards;
    display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(20px);
    background: rgba(18, 20, 30, 0.92);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--toast-accent, var(--accent));
}
.toast-icon { font-size: 14px; flex-shrink: 0; font-weight: 700; color: var(--toast-accent, var(--accent)); }
.toast-msg { flex: 1; color: var(--text-secondary); }
.toast-close {
    background: none; border: none; color: rgba(255,255,255,0.25);
    font-size: 16px; cursor: pointer; padding: 2px 6px;
    transition: var(--transition); border-radius: 4px;
}
.toast-close:hover { color: white; background: rgba(255,255,255,0.08); }
.toast.success { --toast-accent: var(--success); }
.toast.error { --toast-accent: var(--error); }
.toast.info { --toast-accent: var(--accent); }
.toast.warning { --toast-accent: var(--warning); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px) scale(0.96); } }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ─── Tracking Results Table ────────────────────────────── */
.tracking-table-section {
    margin-top: 20px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    animation: fadeIn 0.4s ease;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    position: relative;
}
.tracking-table-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--success), #60a5fa, var(--accent));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tracking-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 16px;
}
.tracking-header h3 {
    font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.tracking-count {
    font-size: 12px; color: var(--text-muted); font-weight: 600;
    background: rgba(255,255,255,0.04); padding: 4px 14px; border-radius: 20px;
    border: 1px solid var(--border);
}

.tracking-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tracking-summary-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 18px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; transition: var(--transition); min-width: 85px;
}
.tracking-summary-item:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.tracking-summary-item.active { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
.tracking-summary-count { font-size: 24px; font-weight: 800; line-height: 1; }
.tracking-summary-label { font-size: 10px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.tracking-summary-item.tracking-delivered .tracking-summary-count { color: #34d399; text-shadow: 0 0 16px rgba(52,211,153,0.3); }
.tracking-summary-item.tracking-returned .tracking-summary-count { color: #fb923c; text-shadow: 0 0 16px rgba(251,146,60,0.3); }
.tracking-summary-item.tracking-error .tracking-summary-count { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.3); }
.tracking-summary-item.tracking-transit .tracking-summary-count { color: #60a5fa; text-shadow: 0 0 16px rgba(96,165,250,0.3); }
.tracking-summary-item.tracking-generated .tracking-summary-count { color: #a78bfa; text-shadow: 0 0 16px rgba(167,139,250,0.3); }
.tracking-summary-item.tracking-out-delivery .tracking-summary-count { color: #fbbf24; text-shadow: 0 0 16px rgba(251,191,36,0.3); }
.tracking-summary-item.tracking-other .tracking-summary-count { color: var(--text-secondary); }
.tracking-summary-item.tracking-cancelled .tracking-summary-count { color: #ef4444; text-shadow: 0 0 16px rgba(239,68,68,0.3); }
.tracking-summary-item.tracking-unfulfilled .tracking-summary-count { color: #f59e0b; text-shadow: 0 0 16px rgba(245,158,11,0.3); }
.tracking-summary-item.tracking-not-found .tracking-summary-count { color: #94a3b8; text-shadow: 0 0 16px rgba(148,163,184,0.3); }
.tracking-summary-item.tracking-total .tracking-summary-count {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tracking-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.tracking-search { flex: 1; }

.tracking-table-wrap {
    overflow-x: auto; border-radius: var(--radius);
    border: 1px solid var(--border);
    max-height: 420px; overflow-y: auto;
}
.tracking-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tracking-table thead {
    background: #0c1024; position: sticky; top: 0; z-index: 1;
}
.tracking-table th {
    padding: 10px 14px; text-align: left; font-weight: 700;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tracking-th-num { width: 40px; text-align: center; }
.tracking-th-courier { width: 100px; }
.tracking-th-awb { width: 180px; }

.tracking-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: var(--transition);
}
.tracking-table tbody tr:hover { background: rgba(90,120,240,0.04); }
.tracking-table tbody tr:last-child { border-bottom: none; }
.tracking-table td { padding: 10px 14px; vertical-align: middle; }
.tracking-num { text-align: center; color: var(--text-muted); font-size: 11px; font-weight: 500; }

.tracking-courier-badge {
    display: inline-block; padding: 3px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 5px; font-family: var(--font-mono);
    font-size: 10px; font-weight: 700;
    color: var(--text-secondary); letter-spacing: 0.05em;
}
.tracking-awb {
    font-family: var(--font-mono); font-weight: 600;
    color: var(--accent); cursor: pointer;
    transition: var(--transition); user-select: all;
}
.tracking-awb:hover { color: #a5b4fc; text-decoration: underline; }

.tracking-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.tracking-badge.tracking-delivered { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.tracking-badge.tracking-returned { background: rgba(251,146,60,0.12); color: #fb923c; border: 1px solid rgba(251,146,60,0.2); }
.tracking-badge.tracking-error { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.tracking-badge.tracking-transit { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }
.tracking-badge.tracking-generated { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
.tracking-badge.tracking-out-delivery { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.tracking-badge.tracking-other { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid var(--border); }
.tracking-badge.tracking-cancelled { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.tracking-badge.tracking-unfulfilled { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
.tracking-badge.tracking-not-found { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
.tracking-row { animation: logLine 0.15s ease; }

/* ─── SKU URL Table ────────────────────────────────────── */
.sku-url-link {
    color: #60a5fa; text-decoration: none;
    font-family: var(--font-mono); font-size: 11px;
    word-break: break-all; transition: var(--transition);
}
.sku-url-link:hover { color: #93c5fd; text-decoration: underline; }
.sku-url-title {
    color: var(--text-muted); font-size: 11px;
    max-width: 200px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sku-url-missing { color: var(--text-muted); font-size: 12px; }
.sku-url-price {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: #34d399; white-space: nowrap;
}
.sku-url-cost {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: #fbbf24; white-space: nowrap;
}

/* ─── SKU URL Column Manager ──────────────────────────── */
.sku-col-manager {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 12px;
}
.sku-col-manager-label {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    margin-right: 4px; white-space: nowrap;
}
.sku-col-pill {
    display: inline-flex; align-items: center; padding: 4px 12px;
    border-radius: 16px; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; user-select: none;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    color: var(--text-muted); opacity: 0.5;
}
.sku-col-pill.active {
    opacity: 1; color: var(--accent);
    border-color: rgba(90,120,240,0.3);
    background: rgba(90,120,240,0.08);
}
.sku-col-pill:hover {
    opacity: 1; border-color: var(--border-hover);
    transform: translateY(-1px);
}
.sku-col-pill.dragging {
    opacity: 0.4; transform: scale(0.95);
    border-style: dashed;
}
.sku-col-pill-label { pointer-events: none; }
.sku-col-arrow {
    font-size: 8px; opacity: 0.4; cursor: pointer;
    padding: 0 2px; transition: all 0.15s;
}
.sku-col-arrow:hover { opacity: 1; transform: scale(1.3); }
.sku-col-pill .sku-col-arrow { margin: 0 1px; }

.sku-url-thumb {
    width: 40px; height: 40px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--border);
    transition: all 0.2s; cursor: pointer;
    background: rgba(255,255,255,0.03);
}
.sku-url-thumb:hover {
    transform: scale(2.5); z-index: 10; position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    border-color: var(--accent);
}

/* ─── DPD Weight Audit ─────────────────────────────────── */
.dpd-module { animation: fadeIn 0.35s ease; }
.dpd-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.dpd-tab {
    padding: 10px 24px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text-secondary); font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.dpd-tab:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.dpd-tab.active {
    background: rgba(90,120,240,0.08); border-color: var(--accent);
    color: var(--accent); border-bottom-color: transparent;
    box-shadow: 0 -2px 8px var(--accent-glow);
}
.dpd-tab-count {
    background: rgba(255,255,255,0.1); padding: 1px 8px;
    border-radius: 10px; font-size: 11px; margin-left: 6px;
}

.dpd-upload-section { margin-bottom: 20px; }
.dpd-upload-section .btn-run { width: auto !important; min-width: auto !important; align-self: flex-start; }
.dpd-drop-large {
    min-height: 140px !important; display: flex; align-items: center; justify-content: center;
    border: 2px dashed rgba(139,92,246,0.25) !important; border-radius: 14px !important;
    background: rgba(139,92,246,0.03) !important; cursor: pointer;
    transition: all 0.3s ease;
}
.dpd-drop-large:hover, .dpd-drop-large.dragover {
    border-color: rgba(139,92,246,0.5) !important;
    background: rgba(139,92,246,0.06) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(139,92,246,0.1);
}
.dpd-upload-row {
    display: flex; gap: 20px; align-items: flex-start;
}
.dpd-upload-row .file-drop { flex: 0 0 auto; min-height: 120px; }
.dpd-upload-info {
    display: flex; flex-direction: column; gap: 10px;
    min-width: 200px;
}
.dpd-file-name { font-size: 12px; }
.dpd-empty {
    padding: 40px; text-align: center; color: var(--text-muted);
    font-size: 14px; border: 1px dashed var(--border);
    border-radius: var(--radius); margin-top: 12px;
}

.dpd-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.dpd-summary-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 10px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: var(--radius);
    transition: var(--transition); overflow: hidden;
}
.dpd-summary-card:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.dpd-card-value { font-size: 22px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dpd-card-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: center; }
.dpd-card-total .dpd-card-value {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dpd-card-above .dpd-card-value { color: #60a5fa; text-shadow: 0 0 16px rgba(96,165,250,0.3); }
.dpd-card-problems .dpd-card-value { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.3); }
.dpd-card-excess .dpd-card-value { color: #fbbf24; text-shadow: 0 0 16px rgba(251,191,36,0.3); }
.dpd-card-unknown .dpd-card-value { color: #a78bfa; text-shadow: 0 0 16px rgba(167,139,250,0.3); }

.dpd-diff-bad { color: #f87171 !important; font-weight: 700; }
.dpd-diff-under { color: #60a5fa !important; }
.dpd-diff-ok { color: var(--text-muted); }

.dpd-dims {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary); max-width: 150px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dpd-unknown-section {
    margin-top: 16px; padding: 16px;
    background: rgba(167,139,250,0.05); border: 1px solid rgba(167,139,250,0.15);
    border-radius: var(--radius);
}
.dpd-unknown-section h4 { font-size: 13px; margin-bottom: 10px; color: #a78bfa; }
.dpd-unknown-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dpd-unknown-tag {
    padding: 3px 10px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(167,139,250,0.2); border-radius: 16px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: #c4b5fd;
}

.dpd-nom-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
.dpd-nom-count {
    margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 600;
}

.dpd-import-panel {
    padding: 16px; background: rgba(255,255,255,0.025);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 12px; animation: fadeIn 0.2s ease;
}
.dpd-import-panel h4 { margin-bottom: 12px; font-size: 14px; }
.dpd-import-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.dpd-import-actions {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
}

.dpd-cat-badge {
    display: inline-block; padding: 2px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 12px; font-size: 10px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}

.dpd-edit-btn {
    background: none; border: none; cursor: pointer;
    font-size: 12px; padding: 2px 4px; border-radius: 4px;
    transition: var(--transition); opacity: 0.4;
}
.dpd-edit-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }

.dpd-filter.active { border-color: var(--accent); color: var(--accent); background: rgba(90,120,240,0.08); }

.dpd-cell-edit {
    cursor: pointer; transition: var(--transition);
    position: relative;
}
.dpd-cell-edit:hover {
    background: rgba(90,120,240,0.08) !important;
    outline: 1px dashed rgba(90,120,240,0.3);
    border-radius: 4px;
}
.dpd-inline-input {
    width: 100%; padding: 4px 6px; background: rgba(0,0,0,0.4);
    border: 1px solid var(--accent); border-radius: 4px;
    color: var(--text-primary); font-family: var(--font-sans);
    font-size: 12px; outline: none;
    box-shadow: 0 0 8px var(--accent-glow);
}
.dpd-inline-input:focus { border-color: var(--accent); }

.dpd-row-selected { background: rgba(90,120,240,0.06) !important; }
.dpd-row-selected td:first-child { border-left: 2px solid var(--accent); }

.dpd-bulk-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 10px;
    background: rgba(90,120,240,0.06); border: 1px solid rgba(90,120,240,0.2);
    border-radius: var(--radius); animation: fadeIn 0.2s ease;
    font-size: 12px; font-weight: 600; color: var(--accent);
}
.dpd-bulk-input {
    padding: 6px 8px !important; font-size: 12px !important;
    width: 70px !important; min-height: auto !important;
}

.dpd-copy-bar {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
    padding: 8px 12px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.dpd-copy-bar .btn-sm { font-size: 11px; padding: 4px 10px; }

.dpd-history-list { display: flex; flex-direction: column; gap: 8px; }
.dpd-history-card {
    position: relative; padding: 14px 16px; cursor: pointer;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius); transition: var(--transition);
}
.dpd-history-card:hover {
    background: rgba(90,120,240,0.06); border-color: rgba(90,120,240,0.3);
    transform: translateX(3px);
}
.dpd-history-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.dpd-history-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.dpd-history-date { font-size: 11px; color: var(--text-muted); }
.dpd-history-stats {
    display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary);
}
.dpd-history-card .dpd-edit-btn {
    position: absolute; top: 12px; right: 12px; opacity: 0; transition: var(--transition);
}
.dpd-history-card:hover .dpd-edit-btn { opacity: 1; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .grid-cards {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}
@media (max-width: 768px) {
    .topbar {
        padding: 0 16px;
        height: 56px;
    }
    .topbar-center { display: none; }
    .topbar-stats { gap: 8px; }
    .topbar-stat { padding: 3px 8px; }
    .topbar-stat-value { font-size: 14px; }
    .topbar-divider { display: none; }
    .topbar-server { display: none; }

    .grid-view { padding: 20px 16px; }
    .grid-cards {
        grid-template-columns: 1fr;
    }
    .grid-welcome h2 { font-size: 22px; }

    .script-view { padding: 20px 16px; }
    .monitor-bar { padding: 0 16px; }

    .tracking-summary { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .tracking-summary-item { min-width: 70px; padding: 8px 12px; }

    .form-shortcut-hint { display: none; }
    .toast-container { left: 16px; right: 16px; }
    .toast { min-width: auto; }

    .cmd-palette { max-width: 95vw; }
}
@media (max-width: 480px) {
    .topbar-brand { display: none; }
    .grid-cards {
        grid-template-columns: 1fr;
    }
}

/* ─── Trendyol Wizard ──────────────────────────────────── */
.ty-wizard { padding: 4px 0; width: 100%; }

/* Tab Bar — main navigation */
.ty-tab-bar {
    display: flex; gap: 0; margin-bottom: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
.ty-tab-btn {
    flex: 1; padding: 14px 20px; font-size: 14px; font-weight: 600;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); transition: all 0.25s ease;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans);
}
.ty-tab-btn:hover {
    background: rgba(90,120,240,0.04); color: var(--text-primary);
}
.ty-tab-active {
    color: var(--accent) !important;
    background: rgba(90,120,240,0.06) !important;
    border-bottom-color: var(--accent);
    box-shadow: inset 0 -2px 8px rgba(90,120,240,0.08);
}

/* Generator Sub-tabs */
.ty-gen-tabs {
    display: flex; gap: 6px; margin-bottom: 1.25rem;
}
.ty-gen-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 10px 10px 0 0;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-bottom: none; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; font-family: var(--font-sans);
}
.ty-gen-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.ty-gen-tab-active {
    background: rgba(90,120,240,0.08) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 -2px 8px var(--accent-glow);
}
.ty-gen-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; font-size: 10px; font-weight: 700;
    background: rgba(245,158,11,0.25); color: #f59e0b;
}

/* Match badges */
.ty-match-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.ty-match-barcode { background: rgba(16,185,129,0.2); color: #10b981; }
.ty-match-sku { background: rgba(90,120,240,0.2); color: #818cf8; }
.ty-match-partial { background: rgba(251,191,36,0.2); color: #fbbf24; }
.ty-match-manual { background: rgba(245,158,11,0.2); color: #f59e0b; }

/* Cost missing style */
.ty-cost-missing { color: #ef4444 !important; font-weight: 600; }

/* Mapping header */
.ty-mapping-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
}

/* Row styles */
.ty-row-unmapped {
    background: rgba(245,158,11,0.04);
}
.ty-row-unmapped:hover {
    background: rgba(245,158,11,0.08) !important;
}
.ty-row-no-cost {
    background: rgba(239,68,68,0.04);
}
.ty-row-no-cost:hover {
    background: rgba(239,68,68,0.08) !important;
}

/* Filter bar */
.ty-filter-bar {
    display: flex; align-items: center; gap: 6px;
    margin-top: 1rem; flex-wrap: wrap;
}
.ty-filter-btn {
    padding: 6px 12px; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    font-family: var(--font-sans);
}
.ty-filter-btn:hover {
    background: rgba(90,120,240,0.06); border-color: var(--border-hover);
}
.ty-filter-active {
    border-width: 2px;
}
.ty-filter-count {
    font-weight: 700; opacity: 0.8; margin-left: 2px;
}
.ty-search-input {
    padding: 6px 12px; border-radius: 8px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 13px;
    width: 240px; max-width: 100%;
    transition: border-color 0.2s; outline: none;
    font-family: var(--font-sans);
}
.ty-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Bulk action bar */
.ty-bulk-bar {
    margin-top: 1rem;
    padding: 10px 16px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
    display: flex; align-items: center;
    animation: tyFadeIn 0.2s ease;
}
.ty-bulk-check {
    width: 15px; height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
}
@keyframes tyFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ty-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 2rem; padding: 1rem 0;
}
.ty-step {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    transition: all 0.3s ease; opacity: 0.5;
}
.ty-step.active {
    opacity: 1; border-color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 15px var(--accent-glow);
}
.ty-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-tertiary); display: flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: var(--text-muted);
}
.ty-step.active .ty-step-num {
    background: var(--accent); color: white;
}
.ty-step-label {
    font-size: 0.85rem; font-weight: 500; color: var(--text-secondary);
}
.ty-step.active .ty-step-label { color: var(--text-primary); }
.ty-step-line {
    width: 40px; height: 2px; background: var(--border);
    transition: background 0.3s ease;
}
.ty-step-line.active { background: var(--accent); }

.ty-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.5rem; animation: panelIn 0.3s ease;
}
@keyframes panelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.ty-panel h3 {
    font-size: 1.1rem; font-weight: 600; margin: 0.5rem 0 0.75rem;
    color: var(--text-primary);
}
.ty-hint {
    font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem;
    line-height: 1.5;
}
.ty-divider {
    height: 1px; background: var(--border); margin: 1.5rem 0;
}

/* Store chips */
.ty-store-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0;
}
.ty-store-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    background: var(--bg-input); border: 1px solid var(--border);
    transition: all 0.2s ease; font-size: 0.85rem;
}
.ty-store-chip:hover {
    border-color: var(--border-hover); background: var(--bg-card-hover);
}
.ty-store-chip.selected {
    border-color: var(--accent); background: rgba(99, 102, 241, 0.15);
    box-shadow: 0 0 10px var(--accent-glow);
}
.ty-store-chip input[type="checkbox"] { display: none; }
.ty-chip-prefix {
    font-weight: 700; color: var(--accent); font-size: 0.9rem;
}
.ty-chip-shop {
    color: var(--text-muted); font-size: 0.75rem;
}

/* Upload area */
.ty-upload-area { margin: 0.75rem 0; }
.ty-btn-try-api {
    background: transparent; border: 1px dashed var(--border);
    color: var(--text-secondary); padding: 8px 16px;
    border-radius: 8px; cursor: pointer; font-size: 0.85rem;
    transition: all 0.2s ease; width: 100%; margin-top: 0.5rem;
}
.ty-btn-try-api:hover {
    border-color: var(--accent); color: var(--accent);
}

/* Stats bar */
.ty-stats-bar {
    display: flex; gap: 16px; margin-bottom: 1.5rem;
}
.ty-stat {
    flex: 1; text-align: center; padding: 1rem;
    background: var(--bg-input); border-radius: 12px;
    border: 1px solid var(--border);
}
.ty-stat-num {
    display: block; font-size: 1.8rem; font-weight: 800;
    color: var(--text-primary); line-height: 1;
}
.ty-stat-label {
    display: block; font-size: 0.75rem; color: var(--text-muted);
    margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.ty-stat-good .ty-stat-num { color: #10b981; }
.ty-stat-warn .ty-stat-num { color: #f59e0b; }

/* Tables */
.ty-table-wrap {
    overflow-x: auto; overflow-y: visible; border-radius: 12px;
    border: 1px solid var(--border); margin: 0.75rem 0 1.5rem;
}
.ty-table-wrap-unmatched {
    overflow: visible; border-radius: 12px;
    border: 1px solid var(--border); margin: 0.75rem 0 1.5rem;
}
.ty-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.ty-table th {
    background: var(--bg-tertiary); padding: 10px 12px;
    text-align: left; font-weight: 600; color: var(--text-secondary);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ty-table td {
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-primary); max-width: 200px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.ty-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
.ty-cost {
    font-weight: 600; font-family: 'JetBrains Mono', monospace;
    color: var(--accent) !important;
}

/* Badges */
.ty-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
}
.ty-badge-barcode { background: rgba(16,185,129,0.2); color: #10b981; }
.ty-badge-sku { background: rgba(90,120,240,0.2); color: #818cf8; }
.ty-badge-manual { background: rgba(245,158,11,0.2); color: #f59e0b; }

/* Selects */
.ty-select-store, .ty-select-product {
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-primary); padding: 6px 10px; border-radius: 6px;
    font-size: 0.8rem; cursor: pointer; transition: border-color 0.2s;
}
.ty-select-store {
    width: auto; min-width: 70px; max-width: 120px;
}
.ty-select-product {
    width: 100%; max-width: 200px;
}
.ty-select-store:focus, .ty-select-product:focus {
    outline: none; border-color: var(--accent);
}

/* Loading */
.ty-loading, .ty-success, .ty-error {
    padding: 8px 12px; border-radius: 8px; font-size: 0.85rem;
    margin-top: 8px;
}
.ty-loading { background: rgba(90,120,240,0.1); color: var(--accent); }
.ty-success { background: rgba(16,185,129,0.1); color: #10b981; }
.ty-error { background: rgba(239,68,68,0.1); color: #ef4444; }

.ty-loading-full {
    text-align: center; padding: 3rem 1rem;
}
.ty-spinner {
    width: 40px; height: 40px; border: 3px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: tysSpin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes tysSpin { to { transform: rotate(360deg); } }

/* Cost breakdown */
.ty-cost-breakdown {
    margin: 1rem 0; padding: 1rem;
    background: var(--bg-tertiary); border-radius: 12px;
    border: 1px solid var(--border);
}
.ty-cost-breakdown h4 { margin: 0 0 8px; font-size: 14px; }
.ty-cost-breakdown ul { margin: 0; padding-left: 8px; list-style: none; }
.ty-cost-breakdown li { padding: 3px 0; font-size: 13px; color: var(--text-secondary); }

/* Bulk toolbar */
.ty-bulk-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; margin-bottom: 10px;
    background: rgba(90,120,240,0.06);
    border: 1px solid rgba(90,120,240,0.15);
    border-radius: var(--radius-sm);
    gap: 12px; flex-wrap: wrap;
}
.ty-bulk-select-all {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.ty-bulk-select-all input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--accent);
}
.ty-bulk-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ty-btn-bulk {
    padding: 6px 14px; border-radius: 8px; font-size: 12px;
    background: rgba(90,120,240,0.12); border: 1px solid rgba(90,120,240,0.25);
    color: var(--accent); cursor: pointer; font-weight: 500;
    transition: all 0.2s;
}
.ty-btn-bulk:hover {
    background: rgba(90,120,240,0.2); transform: scale(1.02);
}

/* ─── Monthly Reporting Dashboard ────────────────────────── */
.ty-report-dashboard { padding: 0.5rem 0; }
.ty-report-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.25rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.ty-year-summary {
    display: flex; gap: 1px; margin-bottom: 1.25rem;
    background: var(--border); border-radius: 12px; overflow: hidden;
}
.ty-year-kpi {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px; background: var(--bg-tertiary);
    text-align: center;
}
.ty-year-kpi:first-child { border-radius: 12px 0 0 12px; }
.ty-year-kpi:last-child { border-radius: 0 12px 12px 0; }
.ty-year-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
.ty-year-kpi-val { font-size: 18px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ty-year-kpi-sub { font-size: 10px; color: var(--text-secondary); }

.ty-month-cards { display: flex; flex-direction: column; gap: 10px; }

.ty-rpt-card {
    display: grid; grid-template-columns: 200px 1fr auto;
    gap: 20px; align-items: center;
    padding: 18px 22px; border-radius: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-card, var(--accent));
    transition: all 0.2s;
}
.ty-rpt-card:hover {
    border-color: var(--border-hover);
    border-left-color: var(--accent-card, var(--accent));
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.ty-rpt-current {
    background: linear-gradient(135deg, var(--bg-tertiary), rgba(90,120,240,0.04));
}
.ty-rpt-empty {
    grid-template-columns: 1fr auto;
    border-style: dashed; opacity: 0.6; padding: 14px 22px;
}
.ty-rpt-empty:hover { opacity: 1; }
.ty-rpt-empty-text { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

.ty-rpt-left { display: flex; flex-direction: column; gap: 10px; }
.ty-rpt-month-info { display: flex; align-items: center; gap: 8px; }
.ty-rpt-month {
    font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0;
}
.ty-rpt-year { font-weight: 400; color: var(--text-muted); margin-left: 4px; font-size: 13px; }
.ty-badge-live {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    background: rgba(90,120,240,0.15); color: #818cf8;
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.ty-badge-final {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600;
    background: rgba(52,211,153,0.12); color: #34d399;
}

.ty-rpt-profit-block { display: flex; flex-direction: column; gap: 4px; }
.ty-rpt-profit-value {
    font-size: 22px; font-weight: 800; color: var(--pcolor, #10b981);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.ty-rpt-margin-bar {
    width: 100%; height: 4px; background: rgba(255,255,255,0.06);
    border-radius: 2px; overflow: hidden;
}
.ty-rpt-margin-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease-out; }
.ty-rpt-margin-label { font-size: 11px; color: var(--text-secondary); }

.ty-rpt-metrics {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.ty-rpt-metric {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.02);
}
.ty-rpt-metric-label {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.4px;
}
.ty-rpt-metric-val {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.ty-rpt-metric-pct {
    font-size: 10px; color: var(--text-secondary); font-weight: 500;
}
.ty-kpi-est {
    color: #f59e0b; font-style: italic; font-size: 9px;
}

.ty-rpt-actions {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.ty-btn-small {
    padding: 5px 12px; border-radius: 6px; font-size: 11px;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-weight: 500;
    transition: all 0.2s; white-space: nowrap;
}
.ty-btn-small:hover {
    background: var(--bg-card-hover); color: var(--text-primary);
    border-color: var(--border-hover);
}
.ty-btn-recalc {
    background: rgba(90,120,240,0.1); border-color: rgba(90,120,240,0.25);
    color: var(--accent);
}
.ty-btn-recalc:hover { background: rgba(90,120,240,0.2); }
.ty-btn-calc {
    background: linear-gradient(135deg, rgba(90,120,240,0.15), rgba(168,85,247,0.1));
    border-color: rgba(90,120,240,0.25); color: #a78bfa;
    padding: 8px 16px; font-size: 12px;
}
.ty-btn-calc:hover {
    background: linear-gradient(135deg, rgba(90,120,240,0.25), rgba(168,85,247,0.2));
}

/* Searchable Product Picker */
.ty-product-search-wrap {
    position: relative; width: 100%; min-width: 180px;
}
.ty-product-search {
    width: 100%; padding: 6px 10px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-primary); border-radius: 6px;
    font-family: var(--font-sans); font-size: 12px;
    outline: none; transition: border-color 0.2s;
}
.ty-product-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.ty-product-search::placeholder {
    color: var(--text-muted); font-size: 11px;
}
.ty-search-results {
    display: none; position: fixed;
    z-index: 99999; min-width: 400px; max-height: 320px; overflow-y: auto;
    background: #1a1a2e;
    border: 2px solid var(--accent);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(90,120,240,0.3);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.ty-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
    font-size: 13px; min-height: 36px;
}
.ty-search-item:hover {
    background: rgba(90,120,240,0.12);
}
.ty-search-item:last-child { border-bottom: none; }
.ty-search-sku {
    font-weight: 700; color: var(--accent);
    flex-shrink: 0; min-width: 50px;
    font-family: var(--font-mono); font-size: 11px;
}
.ty-search-name {
    flex: 1; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ty-search-cost {
    flex-shrink: 0; color: var(--success);
    font-weight: 600; font-size: 11px;
}
.ty-search-empty {
    padding: 16px; text-align: center;
    color: var(--text-muted); font-size: 12px;
}

.ty-row-mapped {
    background: rgba(16,185,129,0.06) !important;
}
.ty-row-mapped .ty-product-search {
    color: var(--success);
    border-color: rgba(16,185,129,0.3);
}

.ty-sku-cell {
    font-family: var(--font-mono); font-weight: 600;
    color: var(--warning); font-size: 0.8rem;
}

.ty-bulk-check {
    width: 15px; height: 15px; cursor: pointer;
    accent-color: var(--accent);
}

.ty-cost-input {
    padding: 6px 8px; border-radius: 6px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 13px;
    transition: border-color 0.2s; text-align: right;
}
.ty-cost-input:focus {
    border-color: var(--accent); outline: none;
}
.ty-btn-save-single {
    padding: 4px 8px; border-radius: 6px;
    background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
    color: #10b981; cursor: pointer; font-size: 14px;
    transition: all 0.2s;
}
.ty-btn-save-single:hover {
    background: rgba(16,185,129,0.3); transform: scale(1.1);
}

.ty-import-section {
    margin: 1rem 0; padding: 1rem;
    background: var(--bg-tertiary); border-radius: 12px;
    border: 1px solid var(--border);
}
.ty-paste-area {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border-radius: 8px; background: var(--bg-card);
    border: 1px solid var(--border); color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
    resize: vertical; min-height: 100px;
    transition: border-color 0.2s;
}
.ty-paste-area:focus {
    border-color: var(--accent); outline: none;
}
.ty-paste-area::placeholder {
    color: var(--text-muted); opacity: 0.6;
}

/* Period Selector */
.ty-period-section { margin: 1rem 0; }
.ty-period-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 8px;
}
.ty-period-group {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ty-period-btn {
    padding: 8px 16px; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all 0.2s ease; font-weight: 500;
}
.ty-period-btn:hover {
    background: rgba(90,120,240,0.1); border-color: var(--accent);
    color: var(--text-primary);
}
.ty-period-btn.ty-period-active {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    border-color: transparent; color: white; font-weight: 600;
    box-shadow: 0 4px 12px rgba(90,120,240,0.35);
}
.ty-date-range {
    display: flex; align-items: center; gap: 12px;
}
.ty-date-range input[type="date"] {
    padding: 8px 12px; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 13px;
    transition: border-color 0.2s;
}
.ty-date-range input[type="date"]:focus {
    border-color: var(--accent); outline: none;
}
.ty-period-summary {
    margin: 1rem 0; padding: 12px 16px;
    background: rgba(90,120,240,0.08); border-radius: 10px;
    border: 1px solid rgba(90,120,240,0.2);
    color: var(--text-primary); font-size: 14px;
}

/* Results Cards */
.ty-results-panel { max-width: 100%; }
.ty-results-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin: 1.5rem 0;
}
.ty-result-card {
    background: var(--bg-tertiary); border-radius: 12px;
    border: 1px solid var(--border); padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform 0.2s, border-color 0.2s;
}
.ty-result-card:hover {
    transform: translateY(-2px); border-color: var(--accent);
}
.ty-result-card-highlight {
    background: linear-gradient(135deg, rgba(90,120,240,0.08), rgba(124,58,237,0.08));
    border-width: 2px;
}
.ty-rc-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.5px;
}
.ty-rc-value {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.ty-rc-unit {
    font-size: 11px; color: var(--text-secondary);
}
.ty-results-extra {
    display: flex; flex-wrap: wrap; gap: 16px;
    padding: 12px 0; margin-bottom: 1rem;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-secondary);
}
.ty-results-table .num {
    text-align: right; font-variant-numeric: tabular-nums;
}
.ty-results-table th.num {
    text-align: right;
}
.ty-results-table tbody tr:hover {
    background: rgba(90,120,240,0.06);
}
.ty-history-row:hover {
    background: rgba(90,120,240,0.1) !important;
}

@media (max-width: 768px) {
    .ty-steps { flex-wrap: wrap; gap: 6px; }
    .ty-step-line { width: 20px; }
    .ty-stats-bar { flex-direction: column; gap: 8px; }
    .ty-store-grid { gap: 6px; }
    .ty-table { font-size: 0.75rem; }
    .ty-select-store, .ty-select-product { max-width: 150px; }
    .ty-bulk-toolbar { flex-direction: column; align-items: flex-start; }
    .ty-product-search-wrap { min-width: 140px; }
    .ty-results-cards { grid-template-columns: repeat(2, 1fr); }
    .ty-month-kpis { grid-template-columns: repeat(3, 1fr); }
    .ty-month-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ty-tab-bar { border-radius: 8px; }
    .ty-tab-btn { padding: 10px 12px; font-size: 12px; }
    .ty-rpt-card { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
    .ty-rpt-metrics { grid-template-columns: repeat(3, 1fr); }
    .ty-year-summary { flex-direction: column; gap: 1px; }
    .ty-mapping-header { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   TRENDYOL SPLIT UI
   ═══════════════════════════════════════════════════════════════ */
.ts-module { animation: fadeIn 0.35s ease; position: relative; }

.ts-search-bar { margin-bottom: 16px; }
.ts-search-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ts-search-icon { font-size: 16px; flex-shrink: 0; }
.ts-search-input {
    flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-family: var(--font-mono); font-size: 13px;
}
.ts-search-input::placeholder { color: var(--text-secondary); font-family: var(--font-sans); }
.ts-search-input:focus { outline: none; border-color: var(--accent); }
textarea.ta-search-textarea {
    resize: vertical; min-height: 36px; max-height: 120px;
    line-height: 1.4; overflow-y: auto;
}
.ts-search-btn {
    padding: 8px 16px; border: none; border-radius: 6px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ts-search-btn:hover { opacity: 0.9; }
.ts-search-clear {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    font-size: 12px; cursor: pointer; transition: var(--transition);
    font-family: var(--font-sans); white-space: nowrap;
}
.ts-search-clear:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

.ts-line-img {
    width: 36px; height: 36px; border-radius: 4px; object-fit: cover;
    flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08);
}
.ts-line-img-placeholder {
    width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}

.ts-awb-info {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
    cursor: help; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

.ts-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; margin-bottom: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    backdrop-filter: blur(12px);
}
.ts-toolbar.ts-toolbar-inline {
    margin-bottom: 0; border-radius: 0;
    border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 4px 10px;
    background: transparent;
    backdrop-filter: none;
    position: sticky; top: 0; z-index: 5;
}
.ts-toolbar-left {
    display: flex; align-items: center; gap: 4px;
}
.ts-toolbar-right {
    display: flex; align-items: center; gap: 4px;
}

.ts-select-all {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    background: transparent; transition: var(--transition);
    margin-right: 2px;
}
.ts-select-all:hover { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.5); }
.ts-select-all input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #10b981; cursor: pointer; margin: 0;
}

.ts-stat-pill {
    padding: 3px 10px; border-radius: 20px; font-size: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-secondary);
    font-family: var(--font-sans); white-space: nowrap;
}
.ts-stat-pill strong { color: var(--text-primary); font-family: var(--font-mono); }
.ta-stat-pending { border-color: rgba(249,115,22,0.15); }
.ta-stat-pending strong { color: #f97316; }
.ts-stat-rules strong { color: #a78bfa; }

.ts-btn-download {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #10b981, #059669); color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
    display: flex; align-items: center; gap: 4px;
}
.ts-btn-download:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.ts-btn-download:disabled { opacity: 0.35; cursor: not-allowed; }
.ts-btn-download #tsBulkCount { font-family: var(--font-mono); }

.ts-btn-auto {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #f97316, #ea580c); color: #fff;
    font-weight: 600; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ts-btn-auto:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.3); }
.ts-btn-auto:disabled { opacity: 0.35; cursor: not-allowed; }

.ts-btn-no-split {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    font-weight: 600; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ts-btn-no-split:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
.ts-btn-no-split:disabled { opacity: 0.35; cursor: not-allowed; }

.ts-btn-bulk-split {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #f97316, #ea580c); color: #fff;
    font-weight: 600; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ts-btn-bulk-split:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.3); }
.ts-btn-bulk-split:disabled { opacity: 0.35; cursor: not-allowed; }

.ts-btn-refresh {
    width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-size: 13px; transition: var(--transition); display: flex;
    align-items: center; justify-content: center;
}
.ts-btn-refresh:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

.ts-stat-skip strong { color: #ef4444; }
.ts-stat-done strong { color: #22c55e; }
.ts-stat-auto strong { color: #f97316; }

.ts-skipped-section {
    margin-top: 10px; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
}
.ts-skipped-section summary {
    cursor: pointer; padding: 8px 14px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); background: rgba(255,255,255,0.025);
    transition: var(--transition); user-select: none;
}
.ts-skipped-section summary:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.ts-skipped-section .ts-list { padding: 4px; }

.ts-list { display: flex; flex-direction: column; gap: 4px; }
.ts-empty {
    text-align: center; padding: 30px; color: var(--text-secondary);
    font-size: 14px;
}
.ts-error { text-align: center; padding: 30px; color: #ef4444; }

.ts-card {
    border: 1px solid var(--border); border-radius: 8px;
    background: rgba(255,255,255,0.02); overflow: hidden;
    transition: var(--transition);
}
.ts-card:hover { border-color: rgba(255,255,255,0.12); }
.ts-card.ts-status-done { opacity: 0.5; }
.ts-card.ts-status-done:hover { opacity: 0.7; }

.ts-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; background: rgba(255,255,255,0.035);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ts-card-order { display: flex; align-items: center; gap: 8px; }
.ts-order-num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); text-decoration: none; }
.ts-order-num:hover { color: #ff6a00; }
.tac-order { text-decoration: none; color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; font-size: 12px; }
.tac-order:hover { color: #ff6a00; }
.ts-order-customer { font-size: 12px; color: var(--text-secondary); }

.ts-card-right { display: flex; align-items: center; gap: 6px; }
.ts-date { font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); }

.ts-badge {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.ts-badge.ts-status-pending { background: rgba(249,115,22,0.15); color: #f97316; }
.ts-badge.ts-status-done { background: rgba(34,197,94,0.15); color: #22c55e; }
.ts-badge.ts-status-skip { background: rgba(239,68,68,0.12); color: #ef4444; }

.ts-total-qty {
    font-size: 11px; font-weight: 700; color: #f97316;
    background: rgba(249,115,22,0.1); padding: 2px 8px; border-radius: 10px;
    font-family: var(--font-mono);
}

.ts-awb-ref {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
    padding: 2px 6px; background: rgba(255,255,255,0.04); border-radius: 4px;
}

.ts-btn-download-single {
    width: 26px; height: 26px; border: 1px solid rgba(16,185,129,0.25);
    border-radius: 5px; background: rgba(16,185,129,0.08); color: #10b981;
    cursor: pointer; font-size: 12px; display: flex; align-items: center;
    justify-content: center; transition: var(--transition); flex-shrink: 0;
}
.ts-btn-download-single:hover {
    background: rgba(16,185,129,0.2); border-color: #10b981;
}

.ts-card-checkbox {
    cursor: pointer; display: flex; align-items: center;
}
.ts-card-checkbox input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: #10b981; cursor: pointer;
}

.ts-card-lines { padding: 0; }
.ts-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.025);
    transition: var(--transition);
}
.ts-line:last-child { border-bottom: none; }
.ts-line:hover { background: rgba(255,255,255,0.02); }
.ts-line.ts-line-done { opacity: 0.5; }

.ts-line-product {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.ts-line-info { flex: 1; min-width: 0; }
.ts-line-name {
    display: block; font-size: 12px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.ts-line-meta { display: flex; gap: 8px; align-items: center; margin-top: 1px; }
.ts-line-sku {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
    font-weight: 500;
}
.ts-line-qty {
    font-size: 11px; font-weight: 700; color: #f97316;
    background: rgba(249,115,22,0.1); padding: 0 5px; border-radius: 3px;
}
.ts-line-price { font-size: 10px; color: #34d399; font-family: var(--font-mono); }

.ts-line-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 8px; }

.ts-btn-split {
    padding: 6px 14px; border: 1px solid #f97316; border-radius: var(--radius);
    background: rgba(249,115,22,0.1); color: #f97316;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ts-btn-split:hover:not(:disabled) {
    background: #f97316; color: #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.ts-btn-split:disabled { opacity: 0.5; cursor: not-allowed; }
.ts-btn-split.ts-split-done {
    border-color: #22c55e; background: rgba(34,197,94,0.1); color: #22c55e;
}
.ts-splitting { animation: pulse 1s infinite; }

.ts-qty-ok { font-size: 11px; color: var(--text-secondary); }
.ts-already-split { font-size: 13px; }

.ts-remember-toggle {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 11px; color: var(--text-secondary); user-select: none;
}
.ts-remember-toggle input { display: none; }
.ts-toggle-slider {
    width: 32px; height: 18px; border-radius: 10px;
    background: rgba(255,255,255,0.1); position: relative;
    transition: var(--transition); flex-shrink: 0;
}
.ts-toggle-slider::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: #666; position: absolute; top: 2px; left: 2px;
    transition: var(--transition);
}
.ts-remember-toggle input:checked + .ts-toggle-slider {
    background: rgba(249,115,22,0.3);
}
.ts-remember-toggle input:checked + .ts-toggle-slider::after {
    transform: translateX(14px); background: #f97316;
}
.ts-toggle-label { white-space: nowrap; }

.ts-rules-section {
    margin-top: 20px; padding: 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
}
.ts-rules-section h3 { margin: 0 0 12px 0; font-size: 14px; color: var(--text-primary); }
.ts-rules-list { display: flex; flex-direction: column; gap: 6px; }
.ts-rule-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; background: rgba(249,115,22,0.05);
    border: 1px solid rgba(249,115,22,0.15); border-radius: 6px;
}
.ts-rule-barcode { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #f97316; }
.ts-rule-name { flex: 1; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-rule-remove {
    width: 22px; height: 22px; border: none; border-radius: 50%;
    background: rgba(239,68,68,0.1); color: #ef4444; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: var(--transition);
}
.ts-rule-remove:hover { background: rgba(239,68,68,0.2); }

.ts-qty-selector {
    display: flex; align-items: center; gap: 6px;
}
.ts-qty-selector label {
    font-size: 11px; color: var(--text-secondary); white-space: nowrap;
}
.ts-qty-controls {
    display: flex; align-items: center; gap: 2px;
}
.ts-qty-btn {
    width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 4px;
    background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.ts-qty-btn:hover { background: rgba(249,115,22,0.15); border-color: #f97316; color: #f97316; }
.ts-qty-input {
    width: 36px; height: 26px; text-align: center; border: 1px solid var(--border);
    border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    -moz-appearance: textfield;
}
.ts-qty-input::-webkit-outer-spin-button,
.ts-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-qty-of {
    font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); margin-left: 2px;
}

.ts-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}
.ts-split-summary {
    font-size: 12px; color: var(--text-secondary); flex: 1;
}
.ts-btn-split-card {
    padding: 8px 18px; border: 1px solid #f97316; border-radius: var(--radius);
    background: rgba(249,115,22,0.1); color: #f97316;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans); white-space: nowrap;
}
.ts-btn-split-card:hover:not(:disabled) {
    background: #f97316; color: #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.ts-btn-split-card:disabled { opacity: 0.4; cursor: not-allowed; }
.ts-btn-split-card.ts-split-done,
.ts-btn-card-split.ts-split-done {
    border-color: #22c55e; background: rgba(34,197,94,0.1); color: #22c55e;
}
.ts-btn-card-split {
    padding: 8px 18px; border: 1px solid #f97316; border-radius: var(--radius);
    background: rgba(249,115,22,0.1); color: #f97316;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans); white-space: nowrap;
}
.ts-btn-card-split:hover:not(:disabled) {
    background: #f97316; color: #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.ts-btn-card-split:disabled { opacity: 0.4; cursor: not-allowed; }
.ts-summary { font-size: 12px; color: var(--text-secondary); flex: 1; }

.ts-toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 10000;
    padding: 12px 20px; border-radius: var(--radius);
    font-size: 13px; font-weight: 500; font-family: var(--font-sans);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 400px;
}
.ts-toast-show { opacity: 1; transform: translateY(0); }
.ts-toast-success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.ts-toast-error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
.ts-toast-info { background: rgba(90,120,240,0.15); border: 1px solid rgba(90,120,240,0.3); color: var(--accent); }
.ts-toast-warning { background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.3); color: #f97316; }

.ts-spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

@media (max-width: 768px) {
    .ts-toolbar { flex-direction: column; gap: 8px; }
    .ts-toolbar-left, .ts-toolbar-right { width: 100%; justify-content: center; }
    .ts-line { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ts-line-actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════
   TRENDYOL AWB DOWNLOAD MODULE
   ═══════════════════════════════════════════════════════════════ */
.ta-module { animation: fadeIn 0.35s ease; position: relative; }
.ta-list { display: flex; flex-direction: column; gap: 4px; }

/* ─── Sticky header ─── */
.ta-sticky-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
}

/* ─── Per-card cancel button ─── */
.ta-btn-cancel-card {
    background: none; border: 1px solid rgba(239,68,68,0.2); border-radius: 6px;
    padding: 3px 7px; cursor: pointer; font-size: 12px; transition: var(--transition);
    color: rgba(239,68,68,0.4); line-height: 1;
}
.ta-btn-cancel-card:hover {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border-color: rgba(239,68,68,0.5);
}

/* ─── Trendyol order status tabs ─── */
.ta-trendyol-status-tabs {
    display: flex; gap: 4px; padding: 8px 0;
    margin-bottom: 6px;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}
.ta-ty-tab {
    padding: 7px 16px; border-radius: 8px; font-size: 13px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-weight: 600;
    transition: var(--transition); font-family: var(--font-sans);
    display: flex; align-items: center; gap: 6px;
}
.ta-ty-tab:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.ta-ty-active {
    background: rgba(90,120,240,0.12) !important;
    border-color: rgba(90,120,240,0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(90,120,240,0.15);
}

/* Status dot indicators */
.ta-ty-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.ta-ty-dot.ta-ty-processing { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }
.ta-ty-dot.ta-ty-shipped { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.5); }
.ta-ty-dot.ta-ty-delivered { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.ta-ty-dot.ta-ty-undelivered { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.ta-ty-dot.ta-ty-cancelled { background: #6b7280; box-shadow: 0 0 6px rgba(107,114,128,0.3); }

/* Card status badges */
.ta-ty-status-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
}
.ta-ty-status-badge-sm {
    padding: 1px 6px; border-radius: 3px; font-size: 9px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap; min-width: 36px; text-align: center;
}
.ta-ty-status-badge.ta-ty-processing, .ta-ty-status-badge-sm.ta-ty-processing {
    background: rgba(245,158,11,0.15); color: #fbbf24;
}
.ta-ty-status-badge.ta-ty-shipped, .ta-ty-status-badge-sm.ta-ty-shipped {
    background: rgba(59,130,246,0.15); color: #60a5fa;
}
.ta-ty-status-badge.ta-ty-delivered, .ta-ty-status-badge-sm.ta-ty-delivered {
    background: rgba(34,197,94,0.15); color: #4ade80;
}
.ta-ty-status-badge.ta-ty-undelivered, .ta-ty-status-badge-sm.ta-ty-undelivered {
    background: rgba(239,68,68,0.15); color: #f87171;
}
.ta-ty-status-badge.ta-ty-cancelled, .ta-ty-status-badge-sm.ta-ty-cancelled {
    background: rgba(107,114,128,0.15); color: #9ca3af;
}

/* Tracking links */
.ta-tracking-link, .ta-tracking-link-sm {
    color: #60a5fa; font-size: 11px; font-family: var(--font-mono);
    text-decoration: none; padding: 2px 6px; border-radius: 4px;
    background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.15);
    transition: var(--transition); white-space: nowrap;
}
.ta-tracking-link:hover, .ta-tracking-link-sm:hover {
    background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.35);
    color: #93c5fd; text-decoration: none;
}
.ta-tracking-link-sm { font-size: 10px; padding: 1px 5px; }

.ta-status-filter {
    display: flex; gap: 6px; padding: 6px 0; margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ta-status-btn {
    padding: 5px 14px; border-radius: 8px; font-size: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-weight: 600;
    transition: var(--transition); font-family: var(--font-sans);
    display: flex; align-items: center; gap: 5px;
}
.ta-status-btn:hover { background: rgba(255,255,255,0.06); }
.ta-status-active {
    background: rgba(90,120,240,0.1) !important;
    border-color: rgba(90,120,240,0.4) !important;
    color: var(--text-primary) !important;
}
.ta-status-pending.ta-status-active {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #f87171 !important;
}
.ta-status-done.ta-status-active {
    background: rgba(52,211,153,0.08) !important;
    border-color: rgba(52,211,153,0.3) !important;
    color: #34d399 !important;
}

.ta-brand-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 0; margin-bottom: 8px;
}
.ta-brand-tab {
    padding: 6px 14px; border-radius: 20px; font-size: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-weight: 500;
    transition: var(--transition); font-family: var(--font-sans);
    display: flex; align-items: center; gap: 5px;
}
.ta-brand-tab:hover {
    background: rgba(90,120,240,0.08); border-color: rgba(90,120,240,0.3);
    color: var(--text-primary);
}
.ta-brand-tab.ta-tab-active {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    border-color: transparent; color: white; font-weight: 600;
    box-shadow: 0 4px 12px rgba(90,120,240,0.35);
}
.ta-brand-tab strong {
    font-family: var(--font-mono); font-weight: 700;
}
.ta-brand-tab.ta-tab-pending strong { color: inherit; }
.ta-brand-tab.ta-tab-done strong { color: inherit; }
.ta-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: rgba(249,115,22,0.2); color: #f97316;
    font-size: 10px; font-weight: 700; font-family: var(--font-mono);
    padding: 0 4px;
}
.ta-tab-active .ta-tab-badge {
    background: rgba(255,255,255,0.25); color: white;
}

.ta-badge-downloaded {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; background: rgba(34,197,94,0.15); color: #22c55e;
    white-space: nowrap;
}
.ta-badge-pending {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; background: rgba(249,115,22,0.15); color: #f97316;
    white-space: nowrap;
}

.ta-brand-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 10px;
    font-weight: 600; background: rgba(168,85,247,0.12); color: #a78bfa;
    font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: 0.3px; white-space: nowrap;
}

.ts-card.ta-downloaded {
    border-left: 3px solid rgba(34,197,94,0.4);
}
.ts-card.ta-not-downloaded {
    border-left: 3px solid rgba(249,115,22,0.5);
}

.ta-btn-mark {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #10b981, #059669); color: #fff;
    font-weight: 600; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ta-btn-mark:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.ta-btn-mark:disabled { opacity: 0.35; cursor: not-allowed; }

.ta-btn-unmark {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: rgba(255,255,255,0.08); border: 1px solid var(--border);
    color: var(--text-secondary); font-weight: 500; font-size: 12px;
    cursor: pointer; transition: var(--transition); font-family: var(--font-sans);
}
.ta-btn-unmark:hover:not(:disabled) {
    background: rgba(255,255,255,0.12); color: var(--text-primary);
}
.ta-btn-unmark:disabled { opacity: 0.35; cursor: not-allowed; }

.ta-stat-pending strong { color: #f97316; }

.ta-tab-sep {
    color: var(--border); font-size: 14px; padding: 0 2px;
    display: flex; align-items: center; opacity: 0.4;
}

.ta-brand-tab.ta-tab-group {
    border-color: rgba(168,85,247,0.3); background: rgba(168,85,247,0.06);
}
.ta-brand-tab.ta-tab-group.ta-tab-active {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.ta-brand-tab.ta-tab-manage {
    border-style: dashed; opacity: 0.7;
}
.ta-brand-tab.ta-tab-manage:hover { opacity: 1; }

.ta-line-brand {
    padding: 1px 6px; border-radius: 3px; font-size: 9px;
    font-weight: 600; background: rgba(168,85,247,0.12); color: #c084fc;
    font-family: var(--font-mono);
}

.ta-btn-reset {
    padding: 6px 10px; border: 1px dashed rgba(239,68,68,0.4); border-radius: 6px;
    background: transparent; color: rgba(239,68,68,0.6); font-size: 11px;
    cursor: pointer; font-family: var(--font-sans); transition: var(--transition);
}
.ta-btn-reset:hover {
    background: rgba(239,68,68,0.1); color: #ef4444; border-color: #ef4444;
}

.ta-group-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.ta-group-editor {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 1000; width: 600px; max-width: 90vw; max-height: 80vh;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; overflow: hidden;
}
.ta-ge-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ta-ge-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ta-ge-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.ta-ge-close:hover { background: rgba(255,255,255,0.1); }
.ta-ge-body {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 16px;
}
.ta-ge-empty { color: var(--text-secondary); font-style: italic; text-align: center; }
.ta-ge-group {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.ta-ge-group-header { display: flex; gap: 8px; align-items: center; }
.ta-ge-group-name {
    flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.ta-ge-group-name:focus { border-color: var(--accent); outline: none; }
.ta-ge-del {
    background: none; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px;
    padding: 4px 8px; cursor: pointer; font-size: 14px; transition: var(--transition);
}
.ta-ge-del:hover { background: rgba(239,68,68,0.15); }
.ta-ge-brands {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.ta-ge-brand-label {
    display: flex; align-items: center; gap: 4px; padding: 3px 8px;
    border: 1px solid var(--border); border-radius: 6px; font-size: 12px;
    cursor: pointer; transition: var(--transition); user-select: none;
}
.ta-ge-brand-label:hover { background: rgba(255,255,255,0.06); }
.ta-ge-brand-label input[type="checkbox"] { width: 14px; height: 14px; }
.ta-ge-brand-label:has(input:checked) {
    background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.4);
    color: #c084fc; font-weight: 600;
}
.ta-ge-group-info {
    font-size: 11px; color: var(--text-secondary); padding: 2px 4px;
    font-family: var(--font-mono);
}
.ta-ge-add {
    padding: 10px; border: 2px dashed var(--border); border-radius: 10px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-size: 13px; font-weight: 500; transition: var(--transition);
}
.ta-ge-add:hover { border-color: var(--accent); color: var(--accent); }
.ta-ge-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-top: 1px solid var(--border);
}
.ta-ge-save {
    padding: 8px 20px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #7c3aed); color: white;
    font-weight: 600; font-size: 13px; cursor: pointer; transition: var(--transition);
}
.ta-ge-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(90,120,240,0.35); }
.ta-ge-cancel {
    padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-size: 13px; transition: var(--transition);
}
.ta-ge-cancel:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 768px) {
    .ta-brand-tabs { gap: 4px; }
    .ta-brand-tab { padding: 4px 10px; font-size: 11px; }
    .ta-group-editor { width: 95vw; }
}

/* ── Compact mode toggle button ── */
.ta-btn-compact {
    padding: 6px 12px; border: 1px solid rgba(139,92,246,0.3); border-radius: 6px;
    background: rgba(139,92,246,0.08); color: #c084fc;
    font-weight: 500; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ta-btn-compact:hover {
    background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.5);
}
.ta-btn-compact.ta-compact-active {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border-color: transparent; color: white; font-weight: 600;
}

/* ── Pagination ── */
.ta-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; margin-top: 4px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ta-page-info {
    font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.ta-page-nav {
    display: flex; align-items: center; gap: 4px;
}
.ta-page-btn {
    min-width: 30px; height: 28px; padding: 0 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.ta-page-btn:hover:not(.disabled) { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.ta-page-btn.ta-page-active {
    background: var(--accent); border-color: var(--accent); color: white;
}
.ta-page-btn.disabled { opacity: 0.3; cursor: default; }
.ta-page-dots { color: var(--text-muted); font-size: 12px; padding: 0 2px; }
.ta-page-size {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted);
}
.ta-page-select {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; color: var(--text-primary); padding: 4px 8px; font-size: 12px;
    cursor: pointer;
}

/* ── No tracking badge ── */
.ta-badge-no-tracking {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; background: rgba(234,179,8,0.15); color: #eab308;
    white-space: nowrap;
}

/* ── Split badge ── */
.ta-split-badge {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; background: rgba(168,85,247,0.15); color: #a855f7;
    white-space: nowrap; cursor: help;
}
.ta-split-badge-sm {
    padding: 1px 5px; border-radius: 10px; font-size: 9px;
    font-weight: 700; background: rgba(168,85,247,0.2); color: #c084fc;
    white-space: nowrap;
}

/* ── Split banner ── */
.ta-split-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 8px; margin: 0 0 8px;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.3);
    color: #c084fc; font-size: 13px; font-weight: 500;
}
.ta-split-banner-icon { font-size: 18px; }
.ta-split-banner-btn {
    margin-left: auto; padding: 6px 16px; border: none; border-radius: 6px;
    background: rgba(168,85,247,0.8); color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.ta-split-banner-btn:hover { background: rgba(168,85,247,1); }

/* ── Cancel button ── */
.ta-btn-cancel {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    font-weight: 600; font-size: 12px; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ta-btn-cancel:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}
.ta-btn-cancel:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Duplicate banner ── */
.ta-dup-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 8px; margin: 0 0 8px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
    color: #fbbf24; font-size: 13px; font-weight: 500;
}
.ta-dup-banner-icon { font-size: 18px; }
.ta-dup-banner-btn {
    margin-left: auto; padding: 6px 16px; border: none; border-radius: 6px;
    background: rgba(245,158,11,0.8); color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.ta-dup-banner-btn:hover { background: rgba(245,158,11,1); }

/* ── Duplicate badges ── */
.ta-dup-badge {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; background: rgba(245,158,11,0.15); color: #f59e0b;
    white-space: nowrap; cursor: help;
}
.ta-dup-badge-sm {
    padding: 1px 5px; border-radius: 10px; font-size: 9px;
    font-weight: 700; background: rgba(245,158,11,0.2); color: #fbbf24;
    white-space: nowrap; cursor: help;
}

/* ── Duplicate detail editor ── */
.ta-dup-editor { width: 700px; }
.ta-dup-intro {
    font-size: 13px; color: var(--text-secondary); margin: 0 0 8px;
    line-height: 1.5;
}
.ta-dup-group {
    background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.ta-dup-group-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600; color: #fbbf24;
    padding-bottom: 6px; border-bottom: 1px solid rgba(245,158,11,0.15);
}
.ta-dup-cancel-group {
    padding: 5px 14px; border: none; border-radius: 6px;
    background: rgba(239,68,68,0.8); color: #fff;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.ta-dup-cancel-group:hover { background: #ef4444; }
.ta-dup-pkg {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
    border-radius: 8px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 12px; transition: var(--transition);
}
.ta-dup-pkg:hover { background: rgba(255,255,255,0.06); }
.ta-dup-pkg-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ta-dup-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-dup-row-bottom { padding-left: 2px; }
.ta-dup-order {
    font-family: var(--font-mono); font-weight: 700; color: var(--accent);
}
.ta-dup-customer {
    color: var(--text-primary); font-weight: 500;
}
.ta-dup-status { font-size: 10px; }
.ta-dup-skus-full {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--text-primary); font-weight: 500;
    word-break: break-all;
}
.ta-dup-pkg-count {
    font-style: normal; font-weight: 400; color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 11px;
}
.ta-dup-cancel-one {
    background: none; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px;
    padding: 3px 8px; cursor: pointer; font-size: 12px; transition: var(--transition);
    color: rgba(239,68,68,0.7);
}
.ta-dup-cancel-one:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.ta-dup-date {
    font-size: 11px; color: var(--text-secondary); white-space: nowrap;
    font-family: var(--font-mono); min-width: 130px;
}
.ta-dup-section-label {
    font-size: 12px; font-weight: 600; color: #fbbf24; padding: 4px 0 2px;
}
.ta-dup-other-header {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    padding: 8px 0 2px; border-top: 1px dashed rgba(255,255,255,0.1);
    margin-top: 6px;
}
.ta-dup-other {
    opacity: 0.6; border-style: dashed !important;
}
.ta-dup-exact {
    border-left: 3px solid rgba(245,158,11,0.5) !important;
}
.ta-dup-check-wrap {
    display: flex; align-items: center; cursor: pointer;
}
.ta-dup-check-wrap input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #ef4444;
    cursor: pointer;
}
.ta-dup-selected {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.3) !important;
}
.ta-dup-oldest {
    font-size: 10px; color: #22c55e; font-weight: 600;
    background: rgba(34,197,94,0.1); padding: 2px 8px; border-radius: 10px;
    white-space: nowrap;
}
.ta-dup-shipped-tag {
    font-size: 10px; color: #60a5fa; font-weight: 600;
    background: rgba(59,130,246,0.1); padding: 2px 8px; border-radius: 10px;
    white-space: nowrap;
}
.ta-dup-closed {
    opacity: 0.7; border-left-color: rgba(59,130,246,0.4) !important;
}
.ta-dup-select-newer {
    font-size: 11px; color: #f59e0b; background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2); border-radius: 6px;
    padding: 3px 10px; cursor: pointer; transition: var(--transition);
    font-family: var(--font-sans); font-weight: 500;
}
.ta-dup-select-newer:hover { background: rgba(245,158,11,0.2); }
.ta-dup-cancel-selected {
    padding: 8px 20px; border: none; border-radius: 8px;
    background: rgba(239,68,68,0.15); color: #ef4444;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.ta-dup-cancel-selected:hover:not(.disabled) {
    background: rgba(239,68,68,0.3); transform: translateY(-1px);
}
.ta-dup-cancel-selected.disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   TRENDYOL RETURNS MODULE
   ═══════════════════════════════════════════════════════════ */
.tr-module { animation: fadeIn 0.35s ease; }
.tr-loading, .tr-error, .tr-empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-secondary); font-size: 14px;
}
.tr-error { color: #ef4444; }

/* Pagination — shared styles for tr- and tq- */
.tr-pagination, .tq-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 16px 0; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tr-page-btn, .tq-page-btn {
    padding: 8px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); color: var(--text-primary);
    font-size: 13px; cursor: pointer; transition: var(--transition);
    font-family: var(--font-sans);
}
.tr-page-btn:hover:not(:disabled), .tq-page-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.08); border-color: var(--accent);
}
.tr-page-btn:disabled, .tq-page-btn:disabled {
    opacity: 0.3; cursor: not-allowed;
}
.tr-page-info, .tq-page-info {
    font-size: 13px; color: var(--text-secondary);
}

.tr-sticky-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.tr-header-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0;
}
.tr-search-bar { flex: 1; }
.tr-search-input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); font-size: 13px;
    font-family: var(--font-sans); transition: var(--transition);
}
.tr-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.tr-period-select {
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); font-size: 12px;
    font-family: var(--font-sans); cursor: pointer;
}
.tr-refresh-btn {
    padding: 10px 16px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-size: 12px; cursor: pointer; transition: var(--transition);
    font-family: var(--font-sans); font-weight: 500; white-space: nowrap;
}
.tr-refresh-btn:hover { background: rgba(255,255,255,0.1); }

.tr-status-tabs {
    display: flex; gap: 4px; padding: 4px 0;
    overflow-x: auto; scrollbar-width: none;
}
.tr-status-tabs::-webkit-scrollbar { display: none; }
.tr-status-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03); color: var(--text-secondary);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: var(--transition); white-space: nowrap;
    font-family: var(--font-sans);
}
.tr-status-tab:hover { background: rgba(255,255,255,0.06); }
.tr-status-active {
    background: color-mix(in srgb, var(--tab-color) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--tab-color) 40%, transparent) !important;
    color: var(--tab-color);
}
.tr-tab-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.tr-summary {
    padding: 4px 0; font-size: 12px; color: var(--text-secondary);
}

.tr-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Claim Card ── */
.tr-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px 18px;
    transition: var(--transition);
}
.tr-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.tr-card-action {
    border-left: 3px solid #ff6a00;
}
.tr-card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 8px;
}
.tr-card-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-order-num {
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    color: var(--accent); text-decoration: none;
}
.tr-order-num:hover { color: #ff6a00; }
.tr-customer {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.tr-status-pill {
    padding: 2px 10px; border-radius: 20px; font-size: 11px;
    font-weight: 600; white-space: nowrap;
}
.tr-reason-badge {
    padding: 2px 8px; border-radius: 12px; font-size: 10px;
    font-weight: 500; background: rgba(239,68,68,0.1); color: #f87171;
    border: 1px solid rgba(239,68,68,0.2); cursor: help;
}
.tr-link-subtle {
    font-size: 16px; color: var(--text-secondary); text-decoration: none;
    opacity: 0.4; transition: var(--transition); padding: 4px;
}
.tr-link-subtle:hover { opacity: 1; color: #ff6a00; }

/* ── Info Row ── */
.tr-card-info {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 8px; font-size: 11px; color: var(--text-secondary);
}
.tr-info-date { white-space: nowrap; }

/* AWB Box */
.tr-awb-box {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 6px;
    background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.15);
}
.tr-awb-label {
    font-size: 10px; font-weight: 600; color: #38bdf8;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tr-awb-number {
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: #38bdf8; text-decoration: none;
}
a.tr-awb-number:hover { text-decoration: underline; }

/* Timer Box */
.tr-timer-box {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 6px;
    background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2);
}
.tr-timer-icon {
    font-size: 12px;
}
.tr-timer-label {
    font-size: 10px; font-weight: 500; color: #fb923c;
}
.tr-timer-value {
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: #fb923c;
}
.tr-timer-expired {
    background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2);
}
.tr-timer-expired .tr-timer-label,
.tr-timer-expired .tr-timer-value,
.tr-timer-expired .tr-timer-icon { color: #ef4444; }
.tr-awb-provider {
    font-size: 9px; color: rgba(56,189,248,0.6);
    text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── Customer Note ── */
.tr-customer-note {
    font-size: 12px; color: #fbbf24; font-style: italic;
    padding: 6px 12px; margin-bottom: 8px;
    background: rgba(245,158,11,0.05); border-radius: 6px;
    border-left: 3px solid rgba(245,158,11,0.3);
}

/* ── Item Rows ── */
.tr-items {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px;
}
.tr-item-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.02); font-size: 12px;
}
.tr-item-row:hover { background: rgba(255,255,255,0.04); }
.tr-item-img {
    width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.tr-item-img-placeholder {
    width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.08);
}
.tr-item-details {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.tr-item-name {
    color: var(--text-primary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-item-meta {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary); opacity: 0.7;
}
.tr-item-qty {
    font-weight: 700; color: #fb923c; min-width: 30px; font-size: 13px;
}
.tr-item-price {
    font-family: var(--font-mono); color: #22c55e; font-size: 12px;
    min-width: 80px; text-align: right; font-weight: 600;
}

/* ── Actions ── */
.tr-actions {
    display: flex; gap: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.tr-btn-approve {
    padding: 6px 16px; border: none; border-radius: 6px;
    background: rgba(34,197,94,0.15); color: #22c55e;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
    border: 1px solid rgba(34,197,94,0.25);
}
.tr-btn-approve:hover {
    background: rgba(34,197,94,0.3);
    transform: translateY(-1px);
}
.tr-btn-refuse {
    padding: 6px 16px; border-radius: 6px; text-decoration: none;
    background: rgba(239,68,68,0.12); color: #ef4444;
    font-size: 12px; font-weight: 600; border: 1px solid rgba(239,68,68,0.25);
    transition: var(--transition); font-family: var(--font-sans);
}
.tr-btn-refuse:hover {
    background: rgba(239,68,68,0.25);
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   TRENDYOL Q&A MODULE
   ═══════════════════════════════════════════════════════════ */
.tq-module { animation: fadeIn 0.35s ease; }
.tq-loading, .tq-error, .tq-empty {
    padding: 60px 20px; text-align: center;
    color: var(--text-secondary); font-size: 14px;
}
.tq-error { color: #ef4444; }

.tq-sticky-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.tq-header-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 0;
}
.tq-search-bar { flex: 1; }
.tq-search-input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); font-size: 13px;
    font-family: var(--font-sans); transition: var(--transition);
}
.tq-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.tq-period-select {
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); font-size: 12px;
    font-family: var(--font-sans); cursor: pointer;
}
.tq-refresh-btn {
    padding: 10px 14px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.05); color: var(--text-primary);
    font-size: 12px; cursor: pointer; transition: var(--transition);
}
.tq-refresh-btn:hover { background: rgba(255,255,255,0.1); }
.tq-urgent-badge {
    padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(245,158,11,0.15); color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.3); white-space: nowrap;
    animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }

.tq-status-tabs {
    display: flex; gap: 4px; padding: 4px 0;
    overflow-x: auto; scrollbar-width: none;
}
.tq-status-tabs::-webkit-scrollbar { display: none; }
.tq-status-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03); color: var(--text-secondary);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: var(--transition); white-space: nowrap; font-family: var(--font-sans);
}
.tq-status-tab:hover { background: rgba(255,255,255,0.06); }
.tq-status-active {
    background: color-mix(in srgb, var(--tab-color) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--tab-color) 40%, transparent) !important;
    color: var(--tab-color);
}
.tq-tab-dot { width: 8px; height: 8px; border-radius: 50%; }
.tq-summary { padding: 4px 0; font-size: 12px; color: var(--text-secondary); }
.tq-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Question Card ── */
.tq-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 12px 16px; transition: var(--transition);
}
.tq-card:hover {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);
}
.tq-card-waiting { border-left: 3px solid rgba(245,158,11,0.5); }

.tq-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 8px;
}
.tq-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tq-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tq-product-img {
    width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
}
.tq-card-product-info {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tq-product-name {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tq-product-sku {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
.tq-status-pill {
    padding: 2px 10px; border-radius: 20px; font-size: 11px;
    font-weight: 600; white-space: nowrap;
}
.tq-date { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

.tq-question-text {
    display: flex; gap: 8px; font-size: 13px; color: var(--text-primary);
    padding: 8px 12px; border-radius: 8px;
    background: rgba(99,102,241,0.05); border-left: 3px solid rgba(99,102,241,0.3);
    margin-bottom: 6px; line-height: 1.5;
}
.tq-q-icon { flex-shrink: 0; }
.tq-customer-name {
    font-size: 11px; color: var(--text-secondary); margin-bottom: 6px;
}

/* ── Answer ── */
.tq-answer {
    display: flex; gap: 8px; padding: 6px 12px; margin-bottom: 4px;
    background: rgba(34,197,94,0.05); border-left: 3px solid rgba(34,197,94,0.3);
    border-radius: 6px;
}
.tq-answer-icon { flex-shrink: 0; margin-top: 2px; }
.tq-answer-body { flex: 1; }
.tq-answer-text { font-size: 12px; color: var(--text-primary); line-height: 1.5; }
.tq-answer-meta { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }

/* ── Answer Form ── */
.tq-answer-form { margin-top: 8px; }
.tq-answer-textarea {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
    resize: vertical; min-height: 60px; transition: var(--transition);
}
.tq-answer-textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.tq-answer-actions {
    display: flex; gap: 6px; margin-top: 6px;
}
.tq-btn-send {
    padding: 6px 16px; border: none; border-radius: 6px;
    background: rgba(34,197,94,0.15); color: #22c55e;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.tq-btn-send:hover { background: rgba(34,197,94,0.3); }
.tq-btn-cancel-answer {
    padding: 6px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    font-size: 12px; cursor: pointer; font-family: var(--font-sans);
}
.tq-btn-answer {
    margin-top: 6px; padding: 5px 14px; border: none; border-radius: 6px;
    background: rgba(99,102,241,0.1); color: var(--accent);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: var(--font-sans);
}
.tq-btn-answer:hover { background: rgba(99,102,241,0.2); transform: translateY(-1px); }

.ts-card-compact {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 6px;
    border: 1px solid var(--border); border-left: 3px solid rgba(249,115,22,0.5);
    background: rgba(255,255,255,0.02); transition: var(--transition);
    font-size: 12px;
}
.ts-card-compact:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.ts-card-compact.ta-downloaded {
    border-left-color: rgba(34,197,94,0.4);
}

.tac-order {
    font-family: var(--font-mono); font-weight: 700; font-size: 12px;
    color: var(--accent); min-width: 90px;
}
.tac-brand {
    padding: 1px 6px; border-radius: 4px; font-size: 9px;
    font-weight: 600; background: rgba(168,85,247,0.12); color: #a78bfa;
    font-family: var(--font-mono); text-transform: uppercase;
    white-space: nowrap; min-width: 60px; text-align: center;
}
.tac-skus {
    flex: 1; font-family: var(--font-mono); font-size: 11px;
    color: var(--text-secondary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.tac-qty {
    font-size: 11px; font-weight: 700; color: #f97316;
    background: rgba(249,115,22,0.1); padding: 1px 6px; border-radius: 8px;
    font-family: var(--font-mono); white-space: nowrap;
}
.tac-status { font-size: 12px; white-space: nowrap; }

/* ── Compact list spacing ── */
.ta-list.ta-compact { gap: 2px; }

/* ═══════════════════════════════════════════════════════════ */
/* AWB Center                                                 */
/* ═══════════════════════════════════════════════════════════ */

.awb-center { display: flex; flex-direction: column; gap: 20px; }

.awb-input-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.awb-input-row {
    display: flex; gap: 12px; margin-bottom: 12px;
}

.awb-textarea {
    min-height: 120px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    resize: vertical;
}

.awb-input-actions {
    display: flex; gap: 10px; align-items: center; margin-top: 14px;
}

.awb-input-hint {
    color: var(--text-muted); font-size: 12px; margin-left: auto;
}

.btn-primary {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff; border: none; border-radius: 10px;
    font-weight: 600; font-size: 14px;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(90,120,240,0.4); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
    padding: 10px 18px;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary); border: 1px solid var(--border); border-radius: 10px;
    font-weight: 500; font-size: 13px;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; gap: 6px;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* Progress */
.awb-progress {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    background: rgba(90,120,240,0.08);
    border: 1px solid rgba(90,120,240,0.2);
    border-radius: 10px;
}

.awb-progress-bar {
    flex: 1; height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px; overflow: hidden;
}

.awb-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), #8b5cf6);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.awb-progress-text {
    color: var(--text-secondary); font-size: 13px;
    white-space: nowrap;
}

/* Results toolbar */
.awb-toolbar-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}

.awb-btn-pdf {
    background: rgba(139,92,246,0.15) !important;
    border-color: rgba(139,92,246,0.3) !important;
    color: #c4b5fd !important;
}
.awb-btn-pdf:hover {
    background: rgba(139,92,246,0.25) !important;
}

/* Signature + order cells */
.awb-signature {
    font-size: 11px; color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px; border-radius: 4px;
    display: inline-block; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.awb-order-name {
    font-size: 12px; color: var(--text-primary);
    font-weight: 500;
}

.awb-no-data {
    color: var(--text-muted); font-size: 12px;
}

@media (max-width: 768px) {
    .awb-input-row { flex-direction: column; }
    .awb-toolbar-actions { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════ */
/* Daily Performance Dashboard — Premium Redesign             */
/* ═══════════════════════════════════════════════════════════ */

/* Full-width override */
.script-view:has(.dp-dashboard) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.profit-module) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.pa-container) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.tp-container) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.um-page) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.sdl-wrap) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.est-wrap) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.lib-wrap) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.sl-wrap) { max-width: 100%; padding: 24px 28px; }
.script-view:has(.sdl-wrap) .form-section,
.script-view:has(.est-wrap) .form-section,
.script-view:has(.lib-wrap) .form-section,
.script-view:has(.sl-wrap) .form-section {
    background: none; border: none; border-radius: 0; padding: 0;
    backdrop-filter: none; box-shadow: none; overflow: visible;
}
.script-view:has(.sdl-wrap) .form-section::before,
.script-view:has(.est-wrap) .form-section::before,
.script-view:has(.lib-wrap) .form-section::before,
.script-view:has(.sl-wrap) .form-section::before { display: none; }

/* Remove card styling for full-width modules */
.script-view:has(.dp-dashboard) .form-section,
.script-view:has(.profit-module) .form-section,
.script-view:has(.pa-container) .form-section,
.script-view:has(.tp-container) .form-section,
.script-view:has(.um-page) .form-section {
    background: none; border: none; border-radius: 0; padding: 0;
    backdrop-filter: none; box-shadow: none; overflow: visible;
}
.script-view:has(.dp-dashboard) .form-section::before,
.script-view:has(.profit-module) .form-section::before,
.script-view:has(.pa-container) .form-section::before,
.script-view:has(.tp-container) .form-section::before,
.script-view:has(.um-page) .form-section::before { display: none; }

.dp-dashboard { display: flex; flex-direction: column; gap: 20px; animation: dpFadeIn 0.4s ease; }
@keyframes dpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Top Bar + Tabs ─── */
.dp-top-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.dp-tabs { display: flex; gap: 4px; }
.dp-tab {
    padding: 9px 20px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; background: rgba(255,255,255,0.03);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.25s ease;
    font-family: var(--font-sans); backdrop-filter: blur(8px);
}
.dp-tab:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.dp-tab.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    color: #c4b5fd; border-color: rgba(139,92,246,0.35);
    box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}

/* ─── Header + Date Nav ─── */
.dp-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}

.dp-date-nav {
    display: flex; align-items: center; gap: 6px;
}

.dp-nav-btn {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; color: var(--text-secondary);
    font-size: 14px; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.dp-nav-btn:hover {
    background: rgba(255,255,255,0.1); color: var(--text-primary);
    border-color: rgba(255,255,255,0.15); transform: translateY(-1px);
}

.dp-today-btn {
    width: auto !important; padding: 0 16px !important;
    font-size: 12px !important; font-weight: 600;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1)) !important;
    border-color: rgba(99,102,241,0.3) !important; color: #a5b4fc !important;
}
.dp-today-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.2)) !important;
}

.dp-date-input {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 8px 16px; color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace; font-size: 14px;
    color-scheme: dark; backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}
.dp-date-input:focus { border-color: rgba(99,102,241,0.4); outline: none; }

.dp-header-actions { display: flex; gap: 8px; }

/* ─── Report Type Selector ─── */
.dp-report-types {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.dp-report-type {
    padding: 8px 16px; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; background: rgba(255,255,255,0.03);
    color: var(--text-secondary); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.25s ease;
    font-family: var(--font-sans); white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.dp-report-type:hover {
    background: rgba(255,255,255,0.07); color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
}
.dp-report-type.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.12));
    color: #c4b5fd; border-color: rgba(139,92,246,0.35);
    font-weight: 600; box-shadow: 0 2px 10px rgba(99,102,241,0.12);
}
.dp-report-type .dp-rt-icon { font-size: 14px; }

/* ─── Filter Bar ─── */
.dp-filter-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    backdrop-filter: blur(12px);
}
.dp-filter-group {
    display: flex; align-items: center; gap: 6px;
}
.dp-filter-label {
    font-size: 11px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600; white-space: nowrap;
}
.dp-filter-sep {
    width: 1px; height: 24px; background: rgba(255,255,255,0.08);
    margin: 0 4px;
}
.dp-channel-pill {
    padding: 5px 12px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; background: rgba(255,255,255,0.03);
    color: var(--text-secondary); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
    font-family: var(--font-sans); user-select: none;
    display: flex; align-items: center; gap: 5px;
}
.dp-channel-pill:hover { background: rgba(255,255,255,0.07); }
.dp-channel-pill.active {
    color: #fff; font-weight: 600;
}
.dp-channel-pill.dp-pill-fb.active {
    background: rgba(66,103,178,0.25); border-color: rgba(66,103,178,0.4);
    color: #8b9dc3;
}
.dp-channel-pill.dp-pill-tk.active {
    background: rgba(255,0,80,0.15); border-color: rgba(255,0,80,0.3);
    color: #ff6b9d;
}
.dp-channel-pill.dp-pill-gg.active {
    background: rgba(66,133,244,0.2); border-color: rgba(66,133,244,0.35);
    color: #93bbf5;
}
.dp-pill-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
.dp-pill-fb .dp-pill-dot { background: #4267b2; }
.dp-pill-tk .dp-pill-dot { background: #ff0050; }
.dp-pill-gg .dp-pill-dot { background: #4285f4; }

/* Brand multi-select dropdown */
.dp-brand-filter-wrap {
    position: relative;
}
.dp-brand-filter-btn {
    padding: 5px 14px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; background: rgba(255,255,255,0.03);
    color: var(--text-secondary); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-sans);
}
.dp-brand-filter-btn:hover { background: rgba(255,255,255,0.07); }
.dp-brand-filter-btn.dp-has-filter {
    background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.3);
    color: #c084fc;
}
.dp-brand-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
    min-width: 240px; max-height: 320px;
    background: var(--bg-tertiary); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    display: none; flex-direction: column;
}
.dp-brand-dropdown.open { display: flex; }
.dp-brand-dropdown-search {
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dp-brand-dropdown-search input {
    width: 100%; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    padding: 6px 10px; color: var(--text-primary);
    font-size: 12px; font-family: var(--font-sans);
}
.dp-brand-dropdown-search input:focus { outline: none; border-color: rgba(139,92,246,0.4); }
.dp-brand-dropdown-actions {
    display: flex; gap: 6px; padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dp-brand-dropdown-actions button {
    flex: 1; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: rgba(255,255,255,0.04);
    color: var(--text-secondary); font-size: 11px; cursor: pointer;
    transition: all 0.2s ease; font-family: var(--font-sans);
}
.dp-brand-dropdown-actions button:hover { background: rgba(255,255,255,0.08); }
.dp-brand-dropdown-list {
    flex: 1; overflow-y: auto; padding: 6px;
}
.dp-brand-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer;
    transition: all 0.15s ease; font-size: 13px;
}
.dp-brand-dropdown-item:hover { background: rgba(255,255,255,0.05); }
.dp-brand-dropdown-item input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: #8b5cf6;
}
.dp-brand-dropdown-item.checked {
    background: rgba(139,92,246,0.08); color: #c4b5fd;
}

.dp-clear-filters {
    padding: 5px 12px; border: 1px dashed rgba(239,68,68,0.25);
    border-radius: 16px; background: transparent;
    color: rgba(239,68,68,0.5); font-size: 11px;
    cursor: pointer; transition: all 0.2s ease;
    font-family: var(--font-sans);
}
.dp-clear-filters:hover {
    background: rgba(239,68,68,0.08); color: #f87171;
    border-color: rgba(239,68,68,0.4);
}

/* ─── KPI Cards — Premium Glassmorphism ─── */
.dp-kpi-row {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}

.dp-kpi {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 20px 22px;
    backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dp-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 16px 16px 0 0;
}
.dp-kpi:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.dp-kpi-icon {
    font-size: 20px; margin-bottom: 8px; display: block;
    opacity: 0.8;
}
.dp-kpi-value {
    font-size: 26px; font-weight: 800; color: var(--text-primary);
    line-height: 1.2; letter-spacing: -0.5px;
    font-family: var(--font-sans);
}
.dp-kpi-unit {
    font-size: 13px; font-weight: 500; opacity: 0.5;
    margin-left: 3px;
}
.dp-kpi-label {
    font-size: 11px; color: var(--text-muted); margin-top: 6px;
    text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
}

/* KPI color themes */
.dp-kpi-revenue::before { background: linear-gradient(90deg, #10b981, #34d399); }
.dp-kpi-revenue .dp-kpi-value { color: #6ee7b7; }

.dp-kpi-orders::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.dp-kpi-orders .dp-kpi-value { color: #a5b4fc; }

.dp-kpi-roas::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dp-kpi-roas .dp-kpi-value { color: #fde68a; }

.dp-kpi-spend::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.dp-kpi-spend .dp-kpi-value { color: #fca5a5; }

.dp-kpi-profit::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.dp-kpi-profit .dp-kpi-value { color: #c4b5fd; }
.dp-kpi-profit .dp-kpi-value.dp-kpi-negative { color: #fca5a5; }

.dp-kpi-aov::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.dp-kpi-aov .dp-kpi-value { color: #67e8f9; }

/* ROAS gauge */
.dp-roas-gauge {
    position: absolute; top: 14px; right: 14px;
    width: 44px; height: 44px;
}
.dp-roas-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dp-roas-gauge-bg {
    fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 4;
}
.dp-roas-gauge-fill {
    fill: none; stroke-width: 4; stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}
.dp-roas-gauge-excellent .dp-roas-gauge-fill { stroke: #34d399; }
.dp-roas-gauge-good .dp-roas-gauge-fill { stroke: #fbbf24; }
.dp-roas-gauge-warning .dp-roas-gauge-fill { stroke: #f59e0b; }
.dp-roas-gauge-bad .dp-roas-gauge-fill { stroke: #f87171; }

/* ─── Table Section ─── */
.dp-table-section {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 0;
    overflow: hidden;
}

.dp-toolbar {
    display: flex; gap: 12px; padding: 16px 20px; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}
.dp-toolbar .tracking-search {
    max-width: 260px;
}

.dp-source { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dp-updated { font-size: 11px; color: var(--text-muted); }

.dp-badge-live {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(16,185,129,0.12); color: #34d399;
    padding: 4px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 600; letter-spacing: 0.3px;
    border: 1px solid rgba(16,185,129,0.2);
}
.dp-badge-live::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #34d399; animation: dpPulse 2s infinite;
}
@keyframes dpPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}
.dp-badge-db {
    background: rgba(99,102,241,0.12); color: #a5b4fc;
    padding: 4px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 600; border: 1px solid rgba(99,102,241,0.2);
}
.dp-badge-fetched {
    background: rgba(245,158,11,0.12); color: #fbbf24;
    padding: 4px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 600; border: 1px solid rgba(245,158,11,0.2);
}

.dp-table-wrap {
    overflow-x: auto; overflow-y: auto;
    max-height: calc(100vh - 360px);
    position: relative;
}

/* Premium Table */
.dp-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}

.dp-table thead th {
    background: var(--bg-secondary, #1a1b2e);
    padding: 12px 14px; text-align: right;
    font-weight: 600; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap; user-select: none;
    cursor: pointer; transition: all 0.2s ease;
    position: sticky; top: 0; z-index: 3;
}
.dp-table thead th:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.dp-table thead th.dp-col-brand { text-align: left; }
.dp-table thead th.dp-sorted {
    color: #a5b4fc;
}

.dp-table tbody tr {
    transition: all 0.15s ease;
    cursor: pointer;
}
.dp-table tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}
.dp-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.012);
}

.dp-table td {
    padding: 11px 14px; text-align: right;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', var(--font-sans);
    font-size: 12.5px; color: var(--text-secondary);
}
.dp-table td.dp-col-brand {
    text-align: left; font-weight: 600; color: var(--text-primary);
    font-family: var(--font-sans); font-size: 13px;
    padding-left: 20px;
}
.dp-table td.dp-col-num { font-weight: 500; }

/* Row ROAS colors — subtle left border */
.dp-row { position: relative; }
.dp-row-excellent { border-left: 3px solid rgba(16,185,129,0.6); }
.dp-row-excellent td:first-child { padding-left: 17px; }
.dp-row-good { border-left: 3px solid rgba(245,158,11,0.5); }
.dp-row-good td:first-child { padding-left: 17px; }
.dp-row-warning { border-left: 3px solid rgba(245,158,11,0.3); }
.dp-row-warning td:first-child { padding-left: 17px; }
.dp-row-bad { border-left: 3px solid rgba(239,68,68,0.5); }
.dp-row-bad td:first-child { padding-left: 17px; }

/* ROAS Badge */
.dp-roas-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: 8px;
    font-weight: 700; font-size: 12px;
    min-width: 52px; text-align: center;
    letter-spacing: -0.2px;
}
.dp-roas-excellent { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.dp-roas-good { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.dp-roas-warning { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.15); }
.dp-roas-bad { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* Inline spend bar */
.dp-spend-cell {
    display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}
.dp-spend-bar {
    width: 50px; height: 5px; border-radius: 3px;
    background: rgba(255,255,255,0.06); overflow: hidden;
    flex-shrink: 0;
}
.dp-spend-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.5s ease;
}
.dp-spend-bar-fb { background: linear-gradient(90deg, #4267b2, #6d8dcf); }
.dp-spend-bar-tk { background: linear-gradient(90deg, #ff0050, #ff4d7f); }
.dp-spend-bar-gg { background: linear-gradient(90deg, #4285f4, #76a9f7); }
.dp-spend-bar-total { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Total row — sticky at bottom */
.dp-table tfoot { position: sticky; bottom: 0; z-index: 3; }
.dp-total-row {
    background: var(--bg-secondary, #1a1b2e) !important;
    border-top: 2px solid rgba(255,255,255,0.08);
}
.dp-total-row td {
    padding: 14px; font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary, #1a1b2e);
}
.dp-total-row td.dp-col-brand {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Expandable Row Detail */
.dp-detail-row td {
    padding: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dp-detail-content {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; padding: 16px 20px 16px 28px;
    background: rgba(255,255,255,0.02);
    animation: dpSlideDown 0.25s ease;
}
@keyframes dpSlideDown {
    from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
    to { opacity: 1; max-height: 200px; }
}
.dp-detail-item {
    display: flex; flex-direction: column; gap: 2px;
}
.dp-detail-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; font-weight: 600;
}
.dp-detail-value {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

/* Loading + Error */
.dp-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 60px 40px; color: var(--text-muted); font-size: 14px;
}
.dp-error {
    padding: 40px; text-align: center; color: #f87171; font-size: 14px;
    background: rgba(239,68,68,0.04); border-radius: 12px; margin: 20px;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
    .dp-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .dp-charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .dp-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .dp-kpi-value { font-size: 20px; }
    .dp-header { flex-direction: column; align-items: stretch; }
    .dp-filter-bar { flex-direction: column; align-items: stretch; }
    .dp-report-types { justify-content: center; }
    .script-view:has(.dp-dashboard) { padding: 16px 12px; }
    .dp-charts-grid { grid-template-columns: 1fr; }
    .dp-performers-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CHARTS & VISUALIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Charts Grid Layout ─── */
.dp-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dp-chart-full { grid-column: 1 / -1; }

/* ─── Chart Container (glassmorphic) ─── */
.dp-chart-box {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 22px 24px 18px;
    backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}
.dp-chart-box:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.dp-chart-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, rgba(99,102,241,0.4), rgba(168,85,247,0.3), transparent);
    border-radius: 16px 16px 0 0;
}
.dp-chart-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.dp-chart-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.dp-chart-title-icon { font-size: 16px; opacity: 0.8; }
.dp-chart-subtitle {
    font-size: 11px; color: var(--text-muted); font-weight: 400;
    margin-left: 8px;
}
.dp-chart-actions {
    display: flex; gap: 4px;
}
.dp-chart-toggle {
    padding: 4px 10px; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; background: rgba(255,255,255,0.03);
    color: var(--text-muted); font-size: 10px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    font-family: var(--font-sans); text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dp-chart-toggle:hover { background: rgba(255,255,255,0.07); color: var(--text-secondary); }
.dp-chart-toggle.active {
    background: rgba(99,102,241,0.15); color: #a5b4fc;
    border-color: rgba(99,102,241,0.3);
}
.dp-chart-body {
    position: relative;
    min-height: 200px;
}
.dp-chart-body svg {
    width: 100%; display: block;
}

/* ─── KPI Delta Badges ─── */
.dp-kpi-delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.dp-kpi-delta.dp-delta-up {
    color: #34d399; background: rgba(52,211,153,0.1);
}
.dp-kpi-delta.dp-delta-down {
    color: #f87171; background: rgba(248,113,113,0.1);
}
.dp-kpi-delta.dp-delta-neutral {
    color: var(--text-muted); background: rgba(255,255,255,0.05);
}
.dp-kpi-delta.dp-delta-new {
    color: #67e8f9; background: rgba(103,232,249,0.1);
    font-size: 10px; letter-spacing: 0.3px;
}
.dp-kpi-sparkline {
    position: absolute; bottom: 12px; right: 14px;
    width: 72px; height: 28px; opacity: 0.6;
}
.dp-kpi-sparkline svg {
    width: 100%; height: 100%;
}
.dp-sparkline-line {
    fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.dp-kpi-revenue .dp-sparkline-line { stroke: #34d399; }
.dp-kpi-orders .dp-sparkline-line { stroke: #818cf8; }
.dp-kpi-roas .dp-sparkline-line { stroke: #fbbf24; }
.dp-kpi-spend .dp-sparkline-line { stroke: #f87171; }
.dp-kpi-profit .dp-sparkline-line { stroke: #a78bfa; }
.dp-kpi-aov .dp-sparkline-line { stroke: #22d3ee; }

/* ─── Trend Chart ─── */
.dp-trend-area { opacity: 0.15; }
.dp-trend-line {
    fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.dp-trend-line-revenue { stroke: #34d399; }
.dp-trend-line-spend { stroke: #f87171; }
.dp-trend-line-profit { stroke: #a78bfa; }
.dp-trend-line-orders { stroke: #818cf8; }
.dp-trend-dot {
    r: 4; stroke-width: 2; cursor: pointer;
    transition: r 0.2s ease;
}
.dp-trend-dot:hover { r: 6; }
.dp-trend-dot-revenue { fill: #0a0e1e; stroke: #34d399; }
.dp-trend-dot-spend { fill: #0a0e1e; stroke: #f87171; }
.dp-trend-dot-profit { fill: #0a0e1e; stroke: #a78bfa; }
.dp-trend-dot-orders { fill: #0a0e1e; stroke: #818cf8; }
.dp-trend-grid { stroke: rgba(255,255,255,0.04); stroke-width: 1; }
.dp-trend-label {
    fill: rgba(255,255,255,0.35); font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
}
.dp-trend-legend {
    display: flex; gap: 16px; justify-content: center;
    margin-top: 12px;
}
.dp-trend-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted); font-weight: 500;
}
.dp-trend-legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.dp-trend-tooltip {
    position: absolute; padding: 10px 14px;
    background: rgba(15,18,35,0.95); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; font-size: 12px; pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 50; white-space: nowrap;
    backdrop-filter: blur(12px);
    opacity: 0; transition: opacity 0.15s ease;
}
.dp-trend-tooltip.visible { opacity: 1; }
.dp-trend-tooltip-date { color: var(--text-muted); font-size: 10px; margin-bottom: 4px; font-weight: 600; }
.dp-trend-tooltip-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.dp-trend-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dp-trend-tooltip-val { font-weight: 700; color: var(--text-primary); }

/* ─── Channel Spend Bars ─── */
.dp-channel-bar-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.dp-channel-bar-label {
    width: 100px; font-size: 12px; color: var(--text-secondary);
    font-weight: 600; text-align: right; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-channel-bar-track {
    flex: 1; height: 24px; background: rgba(255,255,255,0.03);
    border-radius: 6px; overflow: hidden; display: flex;
    border: 1px solid rgba(255,255,255,0.04);
}
.dp-channel-bar-seg {
    height: 100%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; min-width: 0;
}
.dp-channel-bar-seg:first-child { border-radius: 5px 0 0 5px; }
.dp-channel-bar-seg:last-child { border-radius: 0 5px 5px 0; }
.dp-channel-bar-seg.dp-seg-fb { background: rgba(66,103,178,0.6); }
.dp-channel-bar-seg.dp-seg-tk { background: rgba(255,0,80,0.5); }
.dp-channel-bar-seg.dp-seg-gg { background: rgba(66,133,244,0.5); }
.dp-channel-bar-total {
    width: 80px; font-size: 11px; color: var(--text-muted);
    font-weight: 700; text-align: right; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}
.dp-channel-legend {
    display: flex; gap: 14px; justify-content: center;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.dp-channel-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-muted);
}
.dp-channel-legend-dot { width: 10px; height: 4px; border-radius: 2px; }

/* ─── Heatmap / Treemap ─── */
.dp-heatmap-wrap {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 180px;
}
.dp-heatmap-cell {
    position: relative; border-radius: 8px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 6px; cursor: pointer;
    transition: all 0.3s ease; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.dp-heatmap-cell:hover {
    transform: scale(1.04);
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.2);
}
.dp-heatmap-cell-brand {
    font-size: 11px; font-weight: 700; color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-align: center; line-height: 1.2;
}
.dp-heatmap-cell-rev {
    font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}
.dp-heatmap-cell.dp-heat-excellent { background: rgba(16,185,129,0.35); }
.dp-heatmap-cell.dp-heat-good { background: rgba(245,158,11,0.3); }
.dp-heatmap-cell.dp-heat-warning { background: rgba(249,115,22,0.3); }
.dp-heatmap-cell.dp-heat-bad { background: rgba(239,68,68,0.3); }

/* ─── Scatter Plot ─── */
.dp-scatter-dot {
    cursor: pointer; transition: all 0.2s ease;
    opacity: 0.8;
}
.dp-scatter-dot:hover { opacity: 1; transform: scale(1.3); }
.dp-scatter-axis { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.dp-scatter-grid { stroke: rgba(255,255,255,0.03); stroke-width: 1; stroke-dasharray: 4 4; }
.dp-scatter-quadrant {
    font-size: 9px; fill: rgba(255,255,255,0.15);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.dp-scatter-label {
    fill: rgba(255,255,255,0.4); font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
}
.dp-scatter-brandlabel {
    fill: rgba(255,255,255,0.5); font-size: 9px; font-weight: 600;
    pointer-events: none;
}

/* ─── Top/Bottom Performers ─── */
.dp-performers-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.dp-performers-col h4 {
    font-size: 13px; font-weight: 700; margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
.dp-perf-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}
.dp-perf-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.dp-perf-rank {
    font-size: 18px; font-weight: 900; width: 28px; text-align: center;
    opacity: 0.5;
}
.dp-perf-info { flex: 1; min-width: 0; }
.dp-perf-brand {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-perf-meta {
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.dp-perf-roas {
    font-size: 16px; font-weight: 800; padding: 4px 12px;
    border-radius: 10px;
}
.dp-perf-roas.dp-roas-excellent { color: #34d399; background: rgba(52,211,153,0.12); }
.dp-perf-roas.dp-roas-good { color: #fbbf24; background: rgba(251,191,36,0.12); }
.dp-perf-roas.dp-roas-warning { color: #f59e0b; background: rgba(245,158,11,0.12); }
.dp-perf-roas.dp-roas-bad { color: #f87171; background: rgba(248,113,113,0.12); }

/* ─── Settings (preserved) ─── */
.dp-settings-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 24px; margin-bottom: 16px;
}
.dp-settings-section h3 { margin: 0 0 6px; font-size: 16px; }
.dp-hint { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; }

/* Token Cards */
.dp-token-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dp-token-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 14px 18px;
}
.dp-token-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.dp-token-preview { color: var(--text-muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.dp-token-accounts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Add Token Form */
.dp-add-token {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Account Chips */
.dp-account-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: 12px;
}
.dp-chip-active { background: rgba(16,185,129,0.12); color: #34d399; }
.dp-chip-inactive { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.dp-chip-remove {
    background: none; border: none; color: inherit; cursor: pointer;
    font-size: 14px; padding: 0 2px; opacity: 0.6;
}
.dp-chip-remove:hover { opacity: 1; }

/* Brand Mapping */
.dp-brand-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dp-brand-name {
    min-width: 140px; display: flex; align-items: center; gap: 6px;
}
.dp-brand-accounts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.dp-add-acct-select {
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 8px; color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
}
.dp-add-brand-row { display: flex; gap: 8px; margin-top: 12px; }
.dp-btn-danger-sm {
    background: none; border: none; color: #f87171; cursor: pointer;
    font-size: 14px; padding: 2px 4px; border-radius: 4px;
}
.dp-btn-danger-sm:hover { background: rgba(239,68,68,0.15); }
.dp-btn-danger { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; }

/* Unassigned */
.dp-unassigned {
    margin-top: 16px; padding: 12px; background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.2); border-radius: 8px;
}
.dp-unassigned h4 { margin: 0 0 8px; font-size: 13px; color: #fbbf24; }

/* Rates Grid */
.dp-rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dp-rate-item { display: flex; flex-direction: column; gap: 4px; }
.dp-rate-item label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.dp-rate-input { width: 100%; }

/* Config Banner */
.dp-config-banner {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 12px; padding: 20px;
}
.dp-config-inner h3 { margin: 0 0 8px; font-size: 16px; }
.dp-config-inner p { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
.dp-config-row {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Sync Modal */
.dp-sync-modal {
    background: rgba(90,120,240,0.06);
    border: 1px solid rgba(90,120,240,0.2);
    border-radius: 12px; padding: 20px;
}
.dp-sync-inner h3 { margin: 0 0 8px; font-size: 16px; }
.dp-sync-inner p { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
.dp-sync-result { margin-top: 12px; font-size: 13px; }
.dp-sync-success { color: #34d399; }

/* Empty + Negative */
.dp-empty { color: var(--text-muted); font-size: 13px; padding: 12px 0; }
.dp-negative { color: #f87171 !important; }

/* ═══════════════════════════════════════════════════════════════ */
/* Profitability Module — Premium Design                         */
/* ═══════════════════════════════════════════════════════════════ */

.profit-module {
    display: flex;
    flex-direction: column;
    gap: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Tabs — Premium ─────────────────────────────────────── */
.profit-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.015);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.04);
}
.profit-tabs::-webkit-scrollbar { display: none; }

.profit-tab {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
}
.profit-tab:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.05);
}
.profit-tab.active {
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.15));
    color: #e0d4ff;
    border-color: rgba(139,92,246,0.3);
    font-weight: 600;
    box-shadow: 0 2px 16px rgba(99,102,241,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── Content Area ────────────────────────────────────────── */
.profit-content {
    padding: 24px 4px;
    min-height: 300px;
}

/* ─── Run Section ─────────────────────────────────────────── */
.profit-run-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profit-run-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.profit-run-controls .form-group {
    margin-bottom: 0;
}
.profit-run-controls .form-group label {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.profit-run-controls input[type="month"] {
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
    cursor: pointer;
}
.profit-run-controls input[type="month"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.profit-run-controls input[type="month"]::-webkit-inner-spin-button {
    display: none;
}

/* ─── Progress Bar — Premium ──────────────────────────────── */
.profit-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(99,102,241,0.03));
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.profit-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.profit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd);
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 0%;
    position: relative;
}
.profit-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: profit-shimmer 2s infinite;
}
@keyframes profit-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.profit-progress-text {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* ─── Months Grid ─────────────────────────────────────────── */
.profit-months-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.profit-month-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: all 0.25s;
}
.profit-month-btn:hover {
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.2);
    color: rgba(255,255,255,0.9);
}
.profit-month-btn.active {
    background: rgba(96,165,250,0.14);
    border-color: rgba(96,165,250,0.35);
    color: #93c5fd;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(96,165,250,0.1);
}

/* --- Premium Inline Filter Bar --- */
.pf-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(96,165,250,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pf-bar-left {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.pf-bar-right {
    display: flex;
    align-items: flex-end;
}
.pf-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.25);
    padding-left: 2px;
}
.pf-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.pf-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.06);
    margin: 0 2px;
    align-self: flex-end;
}
.pf-chip {
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pf-chip:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15);
}
.pf-chip.active {
    background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(139,92,246,0.12));
    border-color: rgba(96,165,250,0.35);
    color: #93c5fd;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(96,165,250,0.08);
}
.pf-chip.month.active {
    background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.08));
    border-color: rgba(251,191,36,0.3);
    color: #fcd34d;
    box-shadow: 0 0 12px rgba(251,191,36,0.06);
}
.pf-date-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pf-date {
    width: 125px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-sans);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    outline: none;
    transition: border-color 0.2s;
}
.pf-date:focus {
    border-color: rgba(96,165,250,0.4);
}
.pf-arrow {
    color: rgba(255,255,255,0.2);
    font-size: 12px;
}
.pf-reset {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #f87171;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.pf-reset:hover {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
}
.profit-month-switcher {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}
.profit-month-pill {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
}
.profit-month-pill:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
}
.profit-month-pill.active {
    background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(139,92,246,0.1));
    border-color: rgba(96,165,250,0.3);
    color: #93c5fd;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(96,165,250,0.1);
}

/* ─── Report Header — Premium ─────────────────────────────── */
.profit-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}
.profit-report-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 0;
    letter-spacing: -0.01em;
}
.profit-total-badge {
    font-size: 13px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(96,165,250,0.06));
    border: 1px solid rgba(96,165,250,0.25);
    border-radius: 20px;
    color: #93c5fd;
    font-weight: 600;
}
.profit-rates-info {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    padding: 6px 12px;
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

/* ─── TVA Toggle ──────────────────────────────────────────── */
.profit-tva-toggle {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-sans);
}
.profit-tva-toggle:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
}
.profit-tva-toggle.active {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.3);
    color: #c4b5fd;
    font-weight: 600;
}

/* ─── KPI Cards Grid ──────────────────────────────────────── */
.profit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .profit-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.profit-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.profit-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: var(--kpi-accent);
    border-radius: 3px 0 0 3px;
    opacity: 0.7;
}
.profit-kpi-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.profit-kpi-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    flex-shrink: 0;
}
.profit-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profit-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.profit-kpi-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--kpi-accent);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.profit-kpi-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* ─── Tables — Premium Readable ───────────────────────────── */
.profit-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 75vh;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    background: rgba(0,0,0,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    position: relative;
}

/* ─── Fullscreen Table Mode ───────────────────────────────── */
.profit-table-wrap.profit-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    max-height: 100vh;
    border-radius: 0;
    background: hsl(220, 20%, 8%);
    overflow: auto;
}
.profit-table-wrap.profit-fullscreen .profit-table {
    font-size: 13px;
}
.profit-table-wrap.profit-fullscreen .profit-table th {
    padding: 10px 14px;
    font-size: 10px;
}
.profit-table-wrap.profit-fullscreen .profit-table td {
    padding: 6px 14px;
}
.profit-table-wrap.profit-fullscreen .profit-table .store-cell {
    font-size: 13px;
    padding-left: 16px;
}
.profit-table-wrap.profit-fullscreen .profit-table .country-badge {
    font-size: 9px;
    padding: 1px 6px;
    margin-left: 6px;
}
.profit-table-wrap.profit-fullscreen .profit-margin-cell {
    min-width: 100px;
}
.profit-table-wrap.profit-fullscreen .profit-margin-pct {
    font-size: 12px;
}
.profit-fullscreen-close {
    display: none;
}
.profit-table-wrap.profit-fullscreen .profit-fullscreen-close {
    display: flex;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(30,30,40,0.9);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.profit-table-wrap.profit-fullscreen .profit-fullscreen-close:hover {
    background: rgba(239,68,68,0.2);
    border-color: rgba(239,68,68,0.4);
    color: #fca5a5;
}
.profit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
.profit-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    background: hsl(220, 20%, 12%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}
.profit-table th::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: rgba(255,255,255,0.08);
}
.profit-table th.num, .profit-table td.num {
    text-align: right;
}
.profit-table th.highlight, .profit-table td.highlight {
    background: rgba(96,165,250,0.04);
    font-weight: 700;
}
.profit-table th.highlight {
    background: hsl(220, 25%, 14%);
}
.profit-table th.sep, .profit-table td.sep {
    border-left: 2px solid rgba(255,255,255,0.08);
}
.profit-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: -0.005em;
}
/* Zebra striping for better readability */
.profit-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.012);
}
.profit-table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
.profit-table .store-cell {
    font-weight: 700;
    color: #93c5fd;
    min-width: 80px;
    font-size: 14px;
    text-align: left !important;
    padding-left: 20px;
}
.profit-table .country-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.45);
}

/* Status cells — Brighter colors for dark mode */
.profit-table td.delivered { color: #6ee7b7; font-weight: 600; }
.profit-table td.transit { color: #fcd34d; font-weight: 600; }
.profit-table td.returned { color: #fdba74; font-weight: 600; }
.profit-table td.cancelled { color: #fca5a5; font-weight: 600; }
.profit-table td.unfulfilled { color: #cbd5e1; }
.profit-table td.positive { color: #6ee7b7 !important; }
.profit-table td.negative { color: #fca5a5 !important; }

/* Footer row — sticky bottom */
.profit-table tfoot .total-row td {
    border-top: 2px solid rgba(255,255,255,0.1);
    background: hsl(220, 20%, 12%);
    padding-top: 14px;
    padding-bottom: 14px;
    font-weight: 700;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.profit-table tfoot .total-row td::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 2px;
    background: rgba(255,255,255,0.1);
}

/* ─── Product Stats ───────────────────────────────────────── */
.prod-controls {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 0;
}
.prod-min-filter {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.prod-min-filter label { white-space: nowrap; }
.prod-rate-wrap {
    display: flex; align-items: center; gap: 6px;
    min-width: 90px;
}
.prod-rate-bar {
    height: 6px; border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.prod-rate-val {
    font-size: 11px; font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.prod-table th { cursor: pointer; user-select: none; }
.prod-table th:hover { color: var(--accent); }
.prod-thumb {
    width: 36px; height: 36px; object-fit: cover;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);
}
.prod-img-cell { width: 44px; padding: 4px 8px !important; }
.prod-title-cell {
    font-size: 12px; color: var(--text-secondary);
    max-width: 280px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.prod-col-toggles {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.prod-col-pill {
    padding: 3px 10px; font-size: 11px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
    background: transparent; color: var(--text-muted);
    transition: all 0.15s ease;
}
.prod-col-pill.active {
    background: rgba(99,102,241,0.15); color: #818cf8;
    border-color: rgba(99,102,241,0.3);
}
.prod-col-pill:hover { border-color: rgba(255,255,255,0.2); }

/* ─── Product Multi-Filters Bar ───────────────────────────── */
.prod-filters-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 10px 14px;
    background: linear-gradient(135deg, rgba(139,92,246,0.04), rgba(96,165,250,0.03));
    border: 1px solid rgba(139,92,246,0.12);
    border-radius: 12px;
}
.prod-filters-label {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.55);
    margin-right: 4px; white-space: nowrap;
}
.prod-range-input {
    display: flex; align-items: center; gap: 4px;
}
.prod-range-input label {
    font-size: 11px; color: rgba(255,255,255,0.4);
    white-space: nowrap; font-weight: 500;
}
.prod-range-input input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    color: rgba(255,255,255,0.85) !important;
    text-align: center;
}
.prod-range-input input:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.1) !important;
}
.prod-filter-clear {
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px; color: #f87171; cursor: pointer;
    transition: all 0.15s; margin-left: auto;
}
.prod-filter-clear:hover {
    background: rgba(239,68,68,0.15); color: #fca5a5;
}

/* ─── Clickable + Expandable Rows ─────────────────────────── */
.prod-clickable-row { cursor: pointer; transition: background 0.15s; }
.prod-clickable-row:hover { background: rgba(139,92,246,0.06) !important; }
.prod-row-active {
    background: rgba(139,92,246,0.08) !important;
    border-left: 3px solid #8b5cf6;
}
.prod-expanded-row td {
    padding: 0 !important; border-bottom: 2px solid rgba(139,92,246,0.15) !important;
    background: rgba(0,0,0,0.15) !important;
}
.prod-store-breakdown {
    padding: 14px 20px; animation: slideDown 0.2s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.prod-store-header {
    font-size: 13px; color: rgba(255,255,255,0.7);
    margin-bottom: 10px; font-weight: 500;
}
.prod-store-table {
    font-size: 13px !important;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    overflow: hidden;
}
.prod-store-table th {
    font-size: 10px !important; padding: 8px 12px !important;
    background: rgba(139,92,246,0.06) !important;
    color: rgba(255,255,255,0.55) !important;
}
.prod-store-table td {
    padding: 8px 12px !important; font-size: 13px !important;
}

/* ─── Margin Bar (per row) ────────────────────────────────── */
.profit-margin-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}
.profit-margin-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    min-width: 50px;
}
.profit-margin-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.profit-margin-pct {
    font-size: 13px;
    font-weight: 700;
    min-width: 48px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

/* ─── Inline Inputs ───────────────────────────────────────── */
.profit-inline-input {
    width: 80px;
    padding: 6px 10px;
    font-size: 13px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    text-align: right;
    font-weight: 500;
    transition: all 0.2s;
}
.profit-inline-input:focus {
    outline: none;
    border-color: rgba(96,165,250,0.4);
    background: rgba(96,165,250,0.06);
    box-shadow: 0 0 0 3px rgba(96,165,250,0.08);
}
.profit-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ─── Marketing Breakdown ─────────────────────────────────── */
.profit-mkt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}
.profit-mkt-toolbar-left,
.profit-mkt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profit-mkt-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.profit-mkt-total {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: -0.02em;
}
.profit-mkt-breakdown {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mkt-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
}
.mkt-fb { background: rgba(59,130,246,0.12); color: #60a5fa; }
.mkt-tk { background: rgba(236,72,153,0.12); color: #f472b6; }
.mkt-gg { background: rgba(251,191,36,0.12); color: #fbbf24; }

/* ─── Modal ───────────────────────────────────────────────── */
.lc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.lc-modal {
    background: var(--card-bg, #1e2030);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 0;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    animation: slideUp 0.25s ease;
}
.lc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lc-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.lc-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.15s;
}
.lc-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.lc-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ─── Warning ─────────────────────────────────────────────── */
.profit-warning {
    margin-top: 14px;
    padding: 12px 18px;
    font-size: 13px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 12px;
    color: #fcd34d;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.profit-warning .btn-small {
    padding: 4px 12px;
    font-size: 11px;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 6px;
    color: #fcd34d;
    cursor: pointer;
    margin-left: auto;
    font-weight: 600;
    transition: all 0.2s;
}
.profit-warning .btn-small:hover {
    background: rgba(251,191,36,0.18);
}

/* ─── Settings — Premium ──────────────────────────────────── */
.profit-settings {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.profit-setting-group h4 {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profit-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.2s;
}
.profit-setting-row:hover {
    color: rgba(255,255,255,0.9);
}
.profit-vat-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.profit-vat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}
.profit-vat-country {
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    width: 25px;
}

/* ─── Loading & Empty ─────────────────────────────────────── */
.profit-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    gap: 10px;
    font-weight: 500;
}
.profit-empty {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255,255,255,0.4);
    font-size: 15px;
    font-weight: 500;
}

/* Wide table for profitability */
.profit-table-wide {
    min-width: 900px;
}
.profit-table-wide th small,
.profit-table-wide td small {
    display: block;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255,255,255,0.35);
    line-height: 1;
}

/* ─── Unmapped Statuses Alert ─────────────────────────────── */
.profit-unmapped-alert {
    margin-top: 18px;
    padding: 18px;
    background: rgba(251,146,60,0.05);
    border: 1px solid rgba(251,146,60,0.18);
    border-radius: 14px;
}
.profit-unmapped-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    color: #fdba74;
    font-size: 14px;
    font-weight: 600;
}
.profit-unmapped-header span {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    font-weight: 400;
}
.profit-unmapped-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}
.profit-unmapped-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s;
}
.profit-unmapped-row:hover {
    background: rgba(255,255,255,0.04);
}
.profit-unmapped-status {
    flex: 1;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profit-unmapped-count {
    font-size: 12px;
    font-weight: 700;
    color: #fdba74;
    min-width: 32px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

/* Lipsa AWB cell color */
.profit-table td.lipsa-awb { color: #c4b5fd; font-weight: 600; }

/* ─── Open Orders Manual Status ──────────────────────────── */
.profit-open-orders {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px;
    background: rgba(255,255,255,0.015);
}
.profit-open-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.profit-open-awb { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }
.profit-open-cs { font-size: 12px; color: rgba(255,255,255,0.4); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profit-cat-badge {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 8px; display: inline-block;
}
.profit-cat-in-curs-de-livrare { background: rgba(96,165,250,0.15); color: #93c5fd; }
.profit-cat-netrimisa { background: rgba(251,191,36,0.15); color: #fcd34d; }
.profit-cat-lipsa-awb { background: rgba(167,139,250,0.15); color: #c4b5fd; }
.profit-cat-necunoscut { background: rgba(156,163,175,0.12); color: #9ca3af; }

/* ─── Mapping Table Specifics ─────────────────────────────── */
.profit-mapping-cs {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}


/* ═══════════════════════════════════════════════════════════════ */
/* Orders Tab                                                     */
/* ═══════════════════════════════════════════════════════════════ */

.orders-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}
.orders-filter-select {
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-width: 140px;
    border-radius: 8px !important;
    cursor: pointer;
}
.orders-search-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 180px;
}
.orders-search-wrap .form-input {
    flex: 1;
    padding: 7px 12px;
    font-size: 12px;
}
.orders-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
}
.orders-bulk-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.orders-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
}
.orders-ps, .orders-fs {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.orders-ps-paid { color: #6ee7b7; background: rgba(110,231,183,0.1); }
.orders-ps-partially_paid { color: #fcd34d; background: rgba(252,211,77,0.1); }
.orders-ps-voided { color: #fca5a5; background: rgba(252,165,165,0.1); }
.orders-ps-refunded { color: #f87171; background: rgba(248,113,113,0.1); }
.orders-ps-partially_refunded { color: #fdba74; background: rgba(253,186,116,0.1); }
.orders-fs-fulfilled { color: #6ee7b7; background: rgba(110,231,183,0.1); }
.orders-fs-unfulfilled { color: #cbd5e1; background: rgba(203,213,225,0.08); }
.orders-fs-partially_fulfilled { color: #fcd34d; background: rgba(252,211,77,0.1); }

.profit-table td input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.profit-table th:first-child,
.profit-table td:first-child {
    width: 32px;
    text-align: center;
    padding-left: 10px;
    padding-right: 4px;
}
.dp-positive { color: #34d399 !important; }

/* ═══════════════════════════════════════════════════════════════
   ORDER RULES / TAG SHOPIFY MODULE
   ═══════════════════════════════════════════════════════════════ */

/* Top-level tabs (Manual / Reguli) */
.or-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0;
}
.or-main-tab {
    padding: 10px 20px; border-radius: 10px 10px 0 0; border: 1px solid rgba(255,255,255,0.06);
    border-bottom: none; background: rgba(255,255,255,0.02); color: var(--text-muted);
    font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
}
.or-main-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.or-main-tab.active {
    background: rgba(99,102,241,0.1); color: #a5b4fc; font-weight: 700;
    border-color: rgba(99,102,241,0.2);
}

/* Manual form */
.or-manual-form { max-width: 700px; }
.or-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.or-form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.or-input, .or-textarea {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); padding: 8px 12px; border-radius: 8px;
    font-family: var(--font-main); font-size: 13px;
}
.or-input:focus, .or-textarea:focus { border-color: var(--accent); outline: none; }
.or-textarea { font-family: var(--font-mono); font-size: 12px; resize: vertical; }
.or-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.or-manual-log {
    margin-top: 16px; max-height: 400px; overflow-y: auto; padding: 12px 16px;
    font-size: 13px; font-family: var(--font-mono);
    background: rgba(0,0,0,0.2); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}

.or-container {
    max-width: 1100px; margin: 0 auto; padding: 20px 0;
}
.or-loading, .or-empty {
    text-align: center; padding: 40px 20px; color: var(--text-muted);
    font-size: 14px;
}
.or-toolbar {
    display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; margin-bottom: 16px;
}
.or-toolbar-group { display: flex; flex-direction: column; gap: 6px; }
.or-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.or-select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); padding: 8px 14px; border-radius: 8px;
    font-family: var(--font-main); font-size: 13px; cursor: pointer;
    min-width: 140px;
}
.or-select:focus { border-color: var(--accent); outline: none; }

.or-rule-tabs { display: flex; gap: 4px; }
.or-rule-tab {
    padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03); color: var(--text-secondary);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.2s ease; display: flex; align-items: center; gap: 6px;
}
.or-rule-tab:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.or-rule-tab.active {
    background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3);
    color: #a5b4fc; font-weight: 600;
}
.or-rule-icon { font-size: 15px; }

.or-btn-preview {
    padding: 8px 20px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #6366f1, #818cf8); color: white;
    font-weight: 600; font-size: 13px; cursor: pointer;
    transition: all 0.2s ease; margin-left: auto;
}
.or-btn-preview:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.or-btn-preview:disabled { opacity: 0.4; cursor: not-allowed; }

.or-rule-info {
    padding: 12px 16px; border-radius: 10px;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15);
    font-size: 13px; color: var(--text-secondary); margin-bottom: 16px;
    line-height: 1.5;
}
.or-rule-info code {
    background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px;
    font-family: var(--font-mono); font-size: 12px; color: #c084fc;
}
.or-info-badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-weight: 600; font-size: 12px; margin-right: 6px;
}
.or-badge-cancel { background: rgba(239,68,68,0.15); color: #f87171; }
.or-badge-paid { background: rgba(34,197,94,0.15); color: #34d399; }

/* Preview Header */
.or-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; margin-bottom: 8px;
}
.or-preview-count { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.or-preview-actions { display: flex; gap: 8px; }

.or-btn-sel, .or-btn-dry {
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: var(--text-secondary);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.2s ease;
}
.or-btn-sel:hover, .or-btn-dry:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.or-btn-execute {
    padding: 7px 18px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1a2e;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all 0.2s ease;
}
.or-btn-execute:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.or-btn-execute.disabled, .or-btn-dry.disabled { opacity: 0.35; cursor: not-allowed; }

/* Table */
.or-table-wrap {
    overflow-x: auto; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.or-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.or-table th {
    text-align: left; padding: 10px 12px;
    background: rgba(255,255,255,0.04); color: var(--text-muted);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.or-table td {
    padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
}
.or-table tbody tr { transition: background 0.15s ease; }
.or-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.or-row-selected { background: rgba(99,102,241,0.08) !important; }
.or-th-check, .or-td-check { width: 36px; text-align: center; }
.or-td-order { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--text-primary); }
.or-td-prefix { font-weight: 600; color: var(--text-muted); }
.or-td-awb { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.or-td-courier { font-size: 12px; }

/* Status badges */
.or-status, .or-pay {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.or-s-livrata { background: rgba(34,197,94,0.15); color: #34d399; }
.or-s-refuzata { background: rgba(239,68,68,0.15); color: #f87171; }
.or-s-anulata { background: rgba(156,163,175,0.15); color: #9ca3af; }
.or-s-incurs { background: rgba(59,130,246,0.15); color: #60a5fa; }
.or-p-pending { background: rgba(245,158,11,0.15); color: #fbbf24; }
.or-p-paid { background: rgba(34,197,94,0.15); color: #34d399; }
.or-p-voided { background: rgba(156,163,175,0.15); color: #9ca3af; }

/* Execution panel */
.or-exec-panel {
    border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
    overflow: hidden;
}
.or-exec-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: rgba(255,255,255,0.04);
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.or-exec-progress {
    font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
}
.or-exec-bar-wrap {
    height: 4px; background: rgba(255,255,255,0.06);
}
.or-exec-bar {
    height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: width 0.3s ease; border-radius: 0 2px 2px 0;
}
.or-exec-log {
    max-height: 400px; overflow-y: auto; padding: 12px 16px;
    font-size: 13px; font-family: var(--font-mono);
}
.or-log-line {
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.02);
}
.or-log-ok { color: #34d399; }
.or-log-dry { color: #60a5fa; }
.or-log-err { color: #f87171; }

.or-exec-stats {
    display: flex; gap: 24px; padding: 16px 20px; justify-content: center;
    background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.06);
}
.or-stat { text-align: center; }
.or-stat-num { display: block; font-size: 28px; font-weight: 800; }
.or-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.or-stat-ok { color: #34d399; }
.or-stat-skip { color: #fbbf24; }
.or-stat-err { color: #f87171; }.script-view:has(.etransport-gen-full) { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   eMAG LABELS MODULE
   ═══════════════════════════════════════════════════════════════ */
.em-module { animation: fadeIn 0.35s ease; }

.em-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; margin-bottom: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border); border-radius: 10px;
    flex-wrap: wrap; gap: 8px;
}
.em-toolbar-left { display: flex; align-items: center; gap: 8px; }
.em-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.em-btn-refresh {
    width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; cursor: pointer; font-size: 14px;
    transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.em-btn-refresh:hover { background: rgba(255,255,255,0.05); transform: rotate(90deg); }

.em-status-pill {
    padding: 4px 12px; border-radius: 20px; font-size: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-family: var(--font-sans);
}
.em-status-pill strong { color: var(--text-primary); font-family: var(--font-mono); }
.em-status-selected { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.08); }
.em-status-selected strong { color: #818cf8; }

.em-btn {
    padding: 7px 16px; border: none; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; font-family: var(--font-sans);
    display: flex; align-items: center; gap: 4px;
}
.em-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.em-btn:hover:not(:disabled) { transform: translateY(-1px); }

.em-btn-preview {
    background: rgba(99,102,241,0.12); color: #818cf8;
    border: 1px solid rgba(99,102,241,0.25);
}
.em-btn-preview:hover:not(:disabled) { background: rgba(99,102,241,0.2); }

.em-btn-generate {
    background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(234,88,12,0.1));
    color: #f97316; border: 1px solid rgba(249,115,22,0.25);
}
.em-btn-generate:hover:not(:disabled) { background: rgba(249,115,22,0.25); box-shadow: 0 4px 12px rgba(249,115,22,0.2); }

.em-btn-download {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; border: none;
}
.em-btn-download:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

.em-status-bar { margin-bottom: 10px; }
.em-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.em-stat strong { color: var(--text-primary); font-family: var(--font-mono); }
.em-stat-multi strong { color: #f97316; }
.em-stat-awb strong { color: #10b981; }

.em-select-all-bar {
    padding: 6px 14px; margin-bottom: 8px;
    background: rgba(99,102,241,0.04); border: 1px solid rgba(99,102,241,0.1);
    border-radius: 8px; display: flex; align-items: center;
}
.em-select-all-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-secondary); cursor: pointer;
}
.em-select-all-label input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer;
}

.em-orders-list { display: flex; flex-direction: column; gap: 6px; }

.em-order-card {
    border: 1px solid var(--border); border-radius: 10px;
    background: rgba(255,255,255,0.02); overflow: hidden;
    transition: all 0.2s;
}
.em-order-card:hover { border-color: rgba(255,255,255,0.12); }
.em-order-card.em-selected {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.04);
}
.em-order-card.em-multi-colet {
    border-left: 3px solid rgba(249,115,22,0.5);
}

.em-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.em-card-left { display: flex; align-items: center; gap: 10px; }
.em-card-right { display: flex; align-items: center; gap: 12px; }

.em-card-checkbox input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer;
}
.em-order-id {
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    color: #818cf8;
}
.em-customer { font-size: 12px; color: var(--text-primary); font-weight: 500; }
.em-locality { font-size: 11px; color: var(--text-muted); }
.em-date { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

.em-badge {
    padding: 2px 8px; border-radius: 20px; font-size: 10px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.em-badge-multi { background: rgba(249,115,22,0.15); color: #f97316; }
.em-badge-awb { background: rgba(16,185,129,0.12); color: #10b981; }
.em-badge-downloaded { background: rgba(34,197,94,0.1); color: #22c55e; }

.em-card-products { padding: 4px 14px 8px; }

.em-product-line {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0; font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.025);
}
.em-product-line:last-child { border-bottom: none; }

.em-product-sku {
    font-family: var(--font-mono); font-weight: 600; color: var(--accent);
    min-width: 80px;
}
.em-product-name {
    flex: 1; color: var(--text-secondary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.em-product-qty {
    font-weight: 700; color: var(--text-primary);
    font-family: var(--font-mono); min-width: 30px; text-align: right;
}
.em-product-cutii {
    font-size: 11px; padding: 2px 6px; border-radius: 4px;
}
.em-nr-cutii-default { background: rgba(255,255,255,0.04); color: var(--text-muted); }
.em-nr-cutii-multi {
    background: rgba(249,115,22,0.15); color: #f97316; font-weight: 700;
}
.em-colete-badge {
    font-size: 10px; font-weight: 700; color: #f97316;
    background: rgba(249,115,22,0.1); padding: 2px 8px; border-radius: 10px;
    font-family: var(--font-mono);
}

/* Loading & status */
.em-loading { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.em-spinner {
    width: 40px; height: 40px; border: 3px solid var(--border);
    border-top-color: #6366f1; border-radius: 50%;
    animation: emSpin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes emSpin { to { transform: rotate(360deg); } }
.em-empty { text-align: center; padding: 3rem; color: var(--text-secondary); }
.em-error { text-align: center; padding: 2rem; color: #ef4444; }

/* Preview Modal */
.em-preview-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.em-modal-content {
    background: var(--bg-secondary, #1a1a2e); border: 1px solid var(--border);
    border-radius: 16px; width: 90%; max-width: 800px; max-height: 80vh;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.em-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.em-modal-header h3 { margin: 0; font-size: 16px; }
.em-modal-close {
    width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.em-modal-close:hover { background: rgba(239,68,68,0.1); color: #ef4444; }

.em-modal-body { padding: 20px; overflow-y: auto; }

.em-preview-summary {
    padding: 12px 16px; margin-bottom: 16px;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px; display: flex; justify-content: space-between;
    align-items: center; font-size: 14px;
}
.em-preview-order { margin-bottom: 20px; }
.em-preview-order h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }

.em-preview-table {
    width: 100%; font-size: 12px; border-collapse: collapse;
}
.em-preview-table th {
    text-align: left; padding: 6px 8px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.em-preview-table td {
    padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
}
.em-preview-sku { font-family: var(--font-mono); font-weight: 600; color: #818cf8; }
.em-preview-cutii { font-family: var(--font-mono); text-align: center; }
.em-preview-label {
    font-family: var(--font-mono); font-weight: 700; color: #f97316;
    font-size: 11px;
}

@media (max-width: 768px) {
    .em-toolbar { flex-direction: column; align-items: flex-start; }
    .em-card-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .em-card-right { flex-wrap: wrap; }
    .em-modal-content { width: 96%; max-height: 90vh; }
}

/* eMAG Compact toggle button */
.em-btn-compact {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px; background: rgba(255,255,255,0.03); color: var(--text-muted);
    cursor: pointer; font-family: var(--font-sans); transition: all 0.2s;
}
.em-btn-compact:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.em-btn-compact.em-compact-active { background: rgba(99,102,241,0.1); color: #818cf8; border-color: rgba(99,102,241,0.2); }

/* eMAG Compact rows */
.em-compact-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 3px; font-size: 12px; transition: all 0.15s;
    background: rgba(255,255,255,0.01);
}
.em-compact-row:hover { background: rgba(255,255,255,0.03); }
.em-compact-row.em-selected { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); }
.em-compact-row.em-multi-colet { border-left: 3px solid #f59e0b; }
.em-compact-row.em-cancel-req { border-left: 3px solid #ef4444; }
.em-compact-id { font-weight: 700; color: #818cf8; min-width: 80px; }
.em-compact-badges { display: flex; gap: 3px; min-width: 80px; }
.em-compact-sku { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }
.em-compact-customer { min-width: 100px; max-width: 140px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-compact-locality { min-width: 80px; max-width: 120px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-compact-date { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.em-compact-mp {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; min-width: 22px; text-align: center;
    background: rgba(99,102,241,0.08); color: #818cf8;
}

/* Cancellation badge + button */
.em-badge-cancel {
    background: rgba(239,68,68,0.12); color: #ef4444;
    padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
}
.em-btn-cancel-sm {
    padding: 2px 10px; border: 1px solid rgba(239,68,68,0.3); border-radius: 4px;
    background: rgba(239,68,68,0.08); color: #ef4444; font-size: 10px;
    cursor: pointer; font-family: var(--font-sans); font-weight: 600;
    transition: all 0.2s; margin-left: auto;
}
.em-btn-cancel-sm:hover { background: rgba(239,68,68,0.2); }
.em-cancel-req .em-card-header { border-left: 3px solid #ef4444; }
.em-stat-cancel { color: #ef4444 !important; }

/* eMAG Marketplace Filter */
.em-toolbar-center { display: flex; align-items: center; }
.em-mp-filter { display: flex; gap: 2px; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.em-mp-btn {
    padding: 5px 12px; border: none; border-radius: 6px; font-size: 12px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    font-weight: 500; transition: all 0.2s; font-family: var(--font-sans);
}
.em-mp-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.em-mp-btn.em-mp-active {
    background: rgba(99,102,241,0.15); color: #818cf8; font-weight: 700;
}
.em-mp-flag { font-size: 14px; }

/* eMAG Settings — Multi-marketplace cards */
.em-settings-card {
    border: 1px solid var(--border); border-radius: 14px;
    background: rgba(255,255,255,0.02); overflow: hidden;
    max-width: 760px;
}
.em-settings-header {
    padding: 20px 24px 14px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.em-settings-header h3 { margin: 0 0 4px; font-size: 18px; }
.em-settings-desc { margin: 0; font-size: 13px; color: var(--text-muted); }
.em-settings-body { padding: 20px 24px; }

.em-mp-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.em-mp-card {
    border: 1px solid var(--border); border-radius: 12px;
    background: rgba(255,255,255,0.015); overflow: hidden;
    transition: all 0.25s;
}
.em-mp-card-active {
    border-color: rgba(99,102,241,0.3);
    background: rgba(99,102,241,0.03);
}
.em-mp-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(255,255,255,0.02);
}
.em-mp-card-title { display: flex; align-items: center; gap: 10px; }
.em-mp-card-flag { font-size: 22px; }
.em-mp-card-title strong { font-size: 15px; }
.em-mp-code {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: var(--text-muted); background: rgba(255,255,255,0.04);
    padding: 2px 8px; border-radius: 4px;
}
.em-mp-card-body { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.04); }
.em-mp-card-actions { margin-top: 4px; }

/* Toggle switch */
.em-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.em-toggle input { opacity: 0; width: 0; height: 0; }
.em-toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.08); border-radius: 24px;
    transition: all 0.3s; border: 1px solid rgba(255,255,255,0.1);
}
.em-toggle-slider::before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 2px; bottom: 2px; background: white; border-radius: 50%;
    transition: all 0.3s;
}
.em-toggle input:checked + .em-toggle-slider {
    background: rgba(99,102,241,0.5); border-color: rgba(99,102,241,0.4);
}
.em-toggle input:checked + .em-toggle-slider::before {
    transform: translateX(20px); background: #818cf8;
}

/* Fields */
.em-field-group { margin-bottom: 14px; }
.em-field-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px;
}
.em-field-input {
    width: 100%; padding: 9px 12px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-primary); font-family: var(--font-sans);
    transition: border-color 0.2s; box-sizing: border-box;
}
.em-field-input:focus { outline: none; border-color: #6366f1; }
.em-field-input::placeholder { color: var(--text-muted); }
.em-field-hint { margin: 3px 0 0; font-size: 10px; color: var(--text-muted); font-style: italic; }
.em-field-row { display: flex; gap: 14px; }
.em-field-flex { flex: 1; }

.em-pwd-status {
    font-size: 10px; font-weight: 500; padding: 1px 8px;
    border-radius: 10px; font-style: normal;
}
.em-pwd-ok { background: rgba(16,185,129,0.12); color: #10b981; }
.em-pwd-missing { background: rgba(239,68,68,0.12); color: #ef4444; }

/* IP section */
.em-ip-section {
    background: rgba(99,102,241,0.03); border: 1px solid rgba(99,102,241,0.1);
    border-radius: 10px; padding: 14px !important; margin-top: 6px;
}
.em-ip-display { margin: 6px 0 12px; }
.em-ip-code {
    font-family: var(--font-mono); font-size: 16px; font-weight: 700;
    color: #818cf8; background: rgba(99,102,241,0.1);
    padding: 6px 16px; border-radius: 6px; display: inline-block;
}
.em-ip-unknown { font-size: 12px; color: #fbbf24; font-style: italic; }
.em-ip-instructions {
    font-size: 12px; color: var(--text-secondary);
    background: rgba(255,255,255,0.02); border-radius: 8px;
    padding: 10px 14px; border: 1px solid rgba(255,255,255,0.04);
}
.em-ip-instructions ol { margin: 6px 0 0; padding-left: 20px; }
.em-ip-instructions li { margin-bottom: 4px; }
.em-ip-instructions strong { color: var(--text-primary); }

/* Actions & test */
.em-settings-actions {
    display: flex; gap: 10px; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.em-settings-updated {
    margin-top: 14px; font-size: 11px; color: var(--text-muted);
    text-align: right; font-style: italic;
}

.em-test-result { margin-top: 10px; }
.em-test-ok, .em-test-fail {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 14px; border-radius: 8px; font-size: 12px;
}
.em-test-ok {
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
    color: #10b981;
}
.em-test-fail {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    color: #ef4444;
}
.em-test-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.em-test-details { margin: 3px 0 0; font-size: 11px; opacity: 0.8; }

@media (max-width: 768px) {
    .em-toolbar { flex-direction: column; align-items: flex-start; }
    .em-settings-card { max-width: 100%; }
    .em-field-row { flex-direction: column; }
    .em-settings-actions { flex-direction: column; }
    .em-mp-filter { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER SERVICE MODULE
   ═══════════════════════════════════════════════════════════════ */

.cs-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cs-title-icon {
    font-size: 24px;
}
.cs-header-actions {
    display: flex;
    gap: 8px;
}

.cs-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cs-agent-card {
    background: var(--agent-bg);
    border: 1px solid var(--agent-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
}
.cs-agent-card:hover {
    border-color: var(--agent-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.cs-agent-header {
    padding: 18px 20px 14px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cs-agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.cs-agent-info {
    flex: 1;
    min-width: 120px;
}
.cs-agent-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
}
.cs-agent-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cs-agent-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
}
.cs-badge-revenue {
    color: #34d399;
    background: rgba(52,211,153,0.1);
}
.cs-badge-pct {
    color: var(--agent-accent);
    background: rgba(255,255,255,0.06);
    font-family: 'JetBrains Mono', monospace;
}

.cs-agent-stats {
    display: flex;
    gap: 18px;
    margin-left: auto;
}
.cs-stat {
    text-align: center;
}
.cs-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}
.cs-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}

.cs-agent-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.04);
    margin: 0 20px;
}
.cs-agent-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    opacity: 0.7;
}

.cs-store-breakdown {
    padding: 12px 16px 16px;
}
.cs-store-table {
    font-size: 12px !important;
}
.cs-store-table thead th {
    font-size: 10px !important;
    padding: 6px 10px !important;
}
.cs-store-table tbody td {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

.cs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cs-agents-grid { grid-template-columns: 1fr; }
    .cs-agent-header { flex-direction: column; }
    .cs-agent-stats { margin-left: 0; margin-top: 12px; }
    .cs-header-bar { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Fix for Windows Select Dropdowns */
select option { background-color: #0f172a !important; color: white !important; }

        /* ═══ Product Analytics — Unified DP Design ═══ */
        .pa-container { max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
        .pa-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
        .pa-date-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .pa-date-btn {
            padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.03); color: var(--text-secondary); font-size: 12px; font-weight: 500;
            cursor: pointer; transition: all 0.25s; font-family: var(--font-sans);
        }
        .pa-date-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
        .pa-date-btn.active {
            background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(13,148,136,0.12));
            color: #5eead4; border-color: rgba(20,184,166,0.35); font-weight: 600;
        }
        .pa-date-custom { display: flex; align-items: center; gap: 6px; }
        .pa-date-custom input {
            padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04); color: var(--text-primary); font-size: 14px;
            font-family: 'JetBrains Mono', monospace; color-scheme: dark;
        }
        .pa-date-custom span { color: var(--text-muted); }
        .pa-actions { display: flex; gap: 8px; }
        .pa-sync-btn {
            padding: 8px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.2s; font-family: var(--font-sans);
        }
        .pa-sync-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); transform: translateY(-1px); }
        .pa-sync-btn:disabled { opacity: 0.4; transform: none; cursor: wait; }
        .pa-sync-sales { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); color: #6ee7b7; }
        .pa-sync-sales:hover { background: rgba(16,185,129,0.15); }
        .pa-sync-progress { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); }
        .pa-sync-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
        .pa-sync-fill { height: 100%; border-radius: 2px; width: 0%; background: linear-gradient(90deg, #0d9488, #2dd4bf); transition: width 0.3s ease; }
        .pa-sync-msg { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
        .pa-filters {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 14px 18px; border-radius: 14px;
            background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(12px);
        }
        .pa-filter-group { flex: 1; min-width: 140px; }
        .pa-search {
            width: 100%; padding: 8px 14px; border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
            color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
        }
        .pa-search:focus { border-color: rgba(139,92,246,0.5); outline: none; }
        .pa-select {
            width: 100%; padding: 8px 12px; border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
            color: var(--text-primary); font-size: 13px; cursor: pointer; font-family: var(--font-sans);
        }
        .pa-btn-icon {
            padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04); cursor: pointer; font-size: 14px;
            transition: all 0.2s; color: var(--text-secondary);
        }
        .pa-btn-icon:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
        .pa-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
        .pa-card {
            position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
            padding: 20px 22px; border-radius: 16px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
            backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .pa-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
        .pa-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
        .pa-card-icon { display: none; }
        .pa-card-value { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.5px; }
        .pa-card-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
        .pa-card-products::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }
        .pa-card-products .pa-card-value { color: #5eead4; }
        .pa-card-orders::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
        .pa-card-orders .pa-card-value { color: #c4b5fd; }
        .pa-card-sales::before { background: linear-gradient(90deg, #10b981, #34d399); }
        .pa-card-sales .pa-card-value { color: #6ee7b7; }
        .pa-card-revenue::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .pa-card-revenue .pa-card-value { color: #fde68a; }
        .pa-card-stock::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .pa-card-stock .pa-card-value { color: #93c5fd; }
        div.pa-card.pa-card-value::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }
        .pa-sync-info { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
        .pa-table-wrap { border-radius: 16px; overflow: auto; max-height: 80vh; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); position: relative; }
        .pa-table { width: 100%; border-collapse: collapse; }
        .pa-table thead { position: sticky; top: 0; z-index: 3; }
        .pa-table th {
            padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700;
            color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.8px;
            background: rgba(15,20,30,0.97); border-bottom: 2px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px);
        }
        .pa-th-sortable { cursor: pointer; user-select: none; transition: color 0.2s; }
        .pa-th-sortable:hover { color: var(--text-primary); }
        .pa-th-right { text-align: right !important; }
        .pa-th-img { width: 50px; }
        .pa-table td { padding: 10px 16px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; }
        .pa-table tr { transition: background 0.15s; }
        .pa-table tr:hover { background: rgba(20,184,166,0.06); cursor: pointer; }
        .pa-table tr.pa-row-test { opacity: 0.65; }
        .pa-product-img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
        .pa-product-img-placeholder { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
        .pa-product-info { display: flex; flex-direction: column; gap: 2px; }
        .pa-product-title { font-weight: 500; color: var(--text-primary); font-size: 13px; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pa-product-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
        .pa-product-sku { color: #5eead4; }
        .pa-product-barcode { color: var(--text-muted); }
        .pa-product-type { background: rgba(20,184,166,0.12); color: #5eead4; padding: 1px 6px; border-radius: 4px; font-size: 10px; }
        .pa-product-test-badge { background: rgba(245,158,11,0.2); color: #fbbf24; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
        .pa-num { text-align: right; font-variant-numeric: tabular-nums; }
        .pa-num-highlight { color: #6ee7b7; font-weight: 600; }
        .pa-num-zero { color: var(--text-muted); }
        .pa-num-currency { font-size: 11px; color: var(--text-muted); margin-left: 2px; }
        .pa-stores { display: flex; gap: 3px; flex-wrap: wrap; max-width: 180px; }
        .pa-store-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text-muted); }
        .pa-store-badge.active { background: rgba(16,185,129,0.15); color: #6ee7b7; }

        /* ─── SKU Copy ─── */
        .pa-sku-copy { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px; border-radius: 4px; transition: all 0.2s; }
        .pa-sku-copy:hover { background: rgba(94,234,212,0.12); }
        .pa-copy-icon { opacity: 0.35; transition: all 0.2s; flex-shrink: 0; }
        .pa-sku-copy:hover .pa-copy-icon { opacity: 0.8; }
        .pa-sku-copied { background: rgba(110,231,183,0.15) !important; }

        /* ─── Table Footer: Total / Medie ─── */
        .pa-table tfoot { position: sticky; bottom: 0; z-index: 3; }
        .pa-table tfoot tr { cursor: default !important; }
        .pa-table tfoot tr:hover { background: transparent !important; }
        .pa-tfoot-total td {
            padding: 12px 16px;
            font-size: 13px;
            background: rgba(15,20,30,0.97);
            border-top: 2px solid rgba(20,184,166,0.5);
            border-bottom: none;
            vertical-align: middle;
            backdrop-filter: blur(8px);
        }
        .pa-tfoot-label {
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.9);
        }
        .pa-tfoot-count {
            font-weight: 500;
            font-size: 11px;
            color: var(--text-muted);
            text-transform: none;
            letter-spacing: normal;
        }
        .pa-tfoot-tag {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            margin-right: 4px;
            opacity: 0.5;
            vertical-align: middle;
        }
        .pa-tfoot-val {
            font-weight: 700 !important;
            color: #e2e8f0 !important;
            font-variant-numeric: tabular-nums;
        }
        .pa-tfoot-val .pa-tfoot-tag { color: #6ee7b7; }
        .pa-tfoot-val-avg {
            font-weight: 600 !important;
            color: #c4b5fd !important;
            font-variant-numeric: tabular-nums;
        }
        .pa-tfoot-val-avg .pa-tfoot-tag { color: #c4b5fd; }

        .pa-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-secondary); }
        .pa-spinner { width: 20px; height: 20px; border: 2px solid rgba(20,184,166,0.2); border-top-color: #14b8a6; border-radius: 50%; animation: pa-spin 0.8s linear infinite; }
        @keyframes pa-spin { to { transform: rotate(360deg); } }
        .pa-load-more { text-align: center; padding: 16px; }
        .pa-btn-more { padding: 8px 20px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.2s; font-family: var(--font-sans); }
        .pa-btn-more:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
        .pa-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; }
        .pa-modal { background: var(--bg-tertiary); border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); width: 90%; max-width: 700px; max-height: 80vh; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
        .pa-modal-detail { max-width: 800px; }
        .pa-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .pa-modal-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); font-weight: 600; }
        .pa-modal-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
        .pa-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
        .pa-modal-body { padding: 20px 22px; overflow-y: auto; max-height: calc(80vh - 70px); }
        .pa-cat-section { margin-bottom: 20px; }
        .pa-cat-section h4 { color: var(--text-muted); font-size: 11px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.8px; }
        .pa-cat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
        .pa-cat-item-name { color: var(--text-primary); font-weight: 500; }
        .pa-cat-item-count { color: var(--text-muted); font-size: 12px; margin-left: 8px; }
        .pa-cat-item-actions { display: flex; gap: 6px; }
        .pa-cat-btn-sm { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 12px; cursor: pointer; }
        .pa-cat-btn-sm:hover { background: rgba(255,255,255,0.1); }
        .pa-cat-btn-danger { border-color: rgba(239,68,68,0.3); color: #f87171; }
        .pa-cat-btn-danger:hover { background: rgba(239,68,68,0.15); }
        .pa-cat-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
        .pa-cat-add input { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-primary); font-size: 13px; }
        .pa-cat-add button { padding: 8px 16px; border-radius: 10px; border: none; background: linear-gradient(135deg, #0d9488, #14b8a6); color: white; cursor: pointer; font-size: 13px; font-weight: 600; transition: filter 0.2s; }
        .pa-cat-add button:hover { filter: brightness(1.15); }
        .pa-cat-add input { transition: border-color 0.2s; }
        @keyframes pa-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
        .pa-shake { animation: pa-shake 0.3s ease; }
        .pa-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .pa-detail-section { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
        .pa-detail-section h4 { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
        .pa-detail-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
        .pa-detail-row-label { color: var(--text-muted); }
        .pa-detail-row-value { color: var(--text-primary); font-weight: 500; }
        .pa-sort-asc::after { content: ' ▲'; font-size: 10px; }
        .pa-sort-desc::after { content: ' ▼'; font-size: 10px; }
    
        /* Checkbox & Selection */
        .pa-th-check { width: 36px; text-align: center !important; }
        .pa-td-check { width: 36px; text-align: center; }
        .pa-td-check input[type="checkbox"], .pa-th-check input[type="checkbox"] {
            width: 16px; height: 16px; accent-color: #14b8a6; cursor: pointer;
        }
        .pa-row-selected { background: rgba(20,184,166,0.08) !important; }
        .pa-row-selected td { color: var(--text-primary) !important; }
    
        /* Floating Bulk Action Bar */
        .pa-bulk-bar {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
            display: flex; align-items: center; gap: 12px;
            padding: 12px 24px; border-radius: 14px;
            background: rgba(15,20,35,0.95); backdrop-filter: blur(12px);
            border: 1px solid rgba(20,184,166,0.3);
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(20,184,166,0.15);
            z-index: 90; font-size: 13px; color: var(--text-primary);
            animation: pa-slide-up 0.3s ease;
        }
        @keyframes pa-slide-up {
            from { transform: translateX(-50%) translateY(20px); opacity: 0; }
            to { transform: translateX(-50%) translateY(0); opacity: 1; }
        }
        .pa-bulk-btn {
            padding: 8px 16px; border-radius: 8px; border: none;
            font-size: 12px; font-weight: 600; cursor: pointer;
            transition: all 0.2s; font-family: var(--font-sans);
        }
        .pa-bulk-exclude {
            background: linear-gradient(135deg, #ef4444, #dc2626); color: white;
        }
        .pa-bulk-exclude:hover { filter: brightness(1.15); }
        .pa-bulk-cancel {
            background: rgba(255,255,255,0.08); color: var(--text-secondary);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .pa-bulk-cancel:hover { background: rgba(255,255,255,0.15); }
    
        @media (max-width: 768px) {
            .pa-controls { flex-direction: column; }
            .pa-summary { grid-template-columns: repeat(2, 1fr); }
            .pa-product-title { max-width: 150px; }
            .pa-stores { display: none; }
            .pa-detail-grid { grid-template-columns: 1fr; }
            .pa-bulk-bar { left: 16px; right: 16px; transform: none; }
        }

        /* ═══════════════════════════════════════════════════════════ */
        /* Watchlists                                                 */
        /* ═══════════════════════════════════════════════════════════ */
        .wl-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        .wl-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            border-left: 4px solid var(--wl-color, #8b5cf6);
        }
        .wl-card:hover {
            background: rgba(255,255,255,0.06);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        .wl-card-name {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .wl-card-desc {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 12px;
            line-height: 1.4;
        }
        .wl-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: var(--text-muted);
        }
        .wl-card-count {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        .wl-card-actions {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .wl-card:hover .wl-card-actions { opacity: 1; }
        .wl-card-btn {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.05);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            font-size: 13px;
        }
        .wl-card-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
        .wl-card-btn.danger:hover { background: rgba(239,68,68,0.2); color: #f87171; }
        .wl-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        .wl-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
        .wl-empty-text { font-size: 14px; margin-bottom: 8px; }
        .wl-empty-sub { font-size: 12px; color: var(--text-muted); }
        .wl-back {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 6px;
            border: none;
            background: none;
            transition: all 0.15s;
            font-family: var(--font-sans);
            margin-bottom: 12px;
        }
        .wl-back:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
        .wl-detail-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
        }
        .wl-detail-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .wl-detail-desc {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .wl-detail-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .wl-delta-pos { color: #6ee7b7 !important; font-weight: 600; }
        .wl-delta-neg { color: #f87171 !important; font-weight: 600; }
        .wl-delta-zero { color: var(--text-muted) !important; }
        .wl-color-picker {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .wl-color-dot {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.15s;
        }
        .wl-color-dot:hover { transform: scale(1.15); }
        .wl-color-dot.active { border-color: white; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }

/* ─── Shopify Images — Unified Tool ────────────────────── */
.si-tabs {
    display: flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 24px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.si-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.si-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
}
.si-tab.active {
    color: var(--text-primary);
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.25);
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.08);
}
.si-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.si-form {
    animation: siFadeIn 0.25s ease;
}
@keyframes siFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.si-form-desc {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    border-left: 3px solid rgba(52, 211, 153, 0.5);
}
.si-desc-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 10px;
    color: #34d399;
    flex-shrink: 0;
}
.si-form-desc h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.si-form-desc p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.si-form-desc code {
    padding: 1px 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER  (adaugat 2026-06 — doar reguli noi, aditive)
   Accesibilitate, micro-interactiuni, modale, skeleton, toast premium
   ═══════════════════════════════════════════════════════════════ */

/* —— Paleta: contrast text ridicat (gri-ul vechi era ilizibil ~2.7:1) ——
   Pastram tonul rece albastru-violet, dar urcam luminozitatea la AA+. */
:root {
    --text-secondary: #b2bacf;   /* era #9199b0 (6.8:1) -> ~9.3:1 */
    --text-muted:     #868ea6;   /* era #515872 (2.7:1, ilizibil) -> ~5.6:1 */
    --terminal-text:  #c2cae6;   /* era #b0b8d4, putin mai clar in terminal */
    --border-hover:   rgba(255,255,255,0.16);
}

/* —— Selectie text —— */
::selection { background: var(--accent-glow-strong, rgba(139,92,246,0.35)); color: #fff; }

/* —— Focus vizibil la tastatura (accesibilitate) —— */
:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    border-radius: 6px;
}
*:focus:not(:focus-visible) { outline: none; }

/* —— Respecta preferinta de miscare redusa —— */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* —— Toast premium (iconita + intrare/iesire lina) —— */
.toast-icon {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
}
.toast-icon svg { width: 18px; height: 18px; }
.toast.success .toast-icon { color: var(--success, #34d399); }
.toast.error   .toast-icon { color: var(--error, #f87171); }
.toast.warning .toast-icon { color: var(--warning, #fbbf24); }
.toast.info    .toast-icon { color: var(--accent, #818cf8); }
.toast {
    opacity: 0;
    transform: translateX(16px) scale(.98);
    transition: opacity .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
.toast.toast-in  { opacity: 1; transform: translateX(0) scale(1); }
.toast.toast-out { opacity: 0; transform: translateX(16px) scale(.98); }

/* —— Modale premium (uiAlert / uiConfirm / uiPrompt) —— */
.ui-modal-overlay {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(8, 10, 20, 0.55);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity .2s ease;
}
.ui-modal-overlay.open { opacity: 1; }
.ui-modal-overlay.closing { opacity: 0; }
.ui-modal {
    width: min(420px, calc(100vw - 40px));
    background: var(--bg-card, #14161f);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 18px);
    padding: 28px 26px 22px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3);
    transform: translateY(10px) scale(.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.ui-modal-overlay.open .ui-modal { transform: translateY(0) scale(1); opacity: 1; }
.ui-modal-icon {
    width: 52px; height: 52px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.ui-modal-icon svg { width: 26px; height: 26px; }
.ui-modal-icon.question, .ui-modal-icon.info { color: var(--accent, #818cf8); background: var(--accent-glow, rgba(99,102,241,0.14)); }
.ui-modal-icon.success { color: var(--success, #34d399); background: var(--success-bg, rgba(52,211,153,0.12)); }
.ui-modal-icon.error   { color: var(--error, #f87171);   background: var(--error-bg, rgba(248,113,113,0.12)); }
.ui-modal-icon.warning { color: var(--warning, #fbbf24); background: var(--warning-bg, rgba(251,191,36,0.12)); }
.ui-modal.danger .ui-modal-icon { color: var(--error, #f87171); background: var(--error-bg, rgba(248,113,113,0.12)); }
.ui-modal-title {
    margin: 0 0 8px; font-size: 18px; font-weight: 700;
    color: var(--text-primary, #f4f4f6); letter-spacing: -.01em;
}
.ui-modal-msg {
    font-size: 14.5px; line-height: 1.55;
    color: var(--text-secondary, #a8acb8); margin-bottom: 18px;
}
.ui-modal-input {
    width: 100%; box-sizing: border-box;
    padding: 11px 14px; margin-bottom: 18px;
    background: var(--bg-input, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: var(--radius, 12px);
    color: var(--text-primary, #fff); font-size: 14px;
    font-family: var(--font-sans, inherit);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-modal-input:focus {
    outline: none;
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(99,102,241,0.18));
}
.ui-modal-actions { display: flex; gap: 10px; justify-content: center; }
.ui-modal-btn {
    flex: 1; max-width: 170px;
    padding: 11px 18px;
    border-radius: var(--radius, 12px);
    font-size: 14px; font-weight: 600; font-family: var(--font-sans, inherit);
    cursor: pointer; border: 1px solid transparent;
    transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.ui-modal-btn:active { transform: translateY(1px); }
.ui-modal-cancel {
    background: var(--bg-input, rgba(255,255,255,0.05));
    border-color: var(--border, rgba(255,255,255,0.1));
    color: var(--text-secondary, #c4c7d0);
}
.ui-modal-cancel:hover { background: var(--bg-card-hover, rgba(255,255,255,0.09)); color: var(--text-primary, #fff); }
.ui-modal-confirm {
    background: var(--gradient, linear-gradient(135deg, #6366f1, #a855f7));
    color: #fff;
    box-shadow: 0 6px 18px var(--accent-glow, rgba(99,102,241,0.35));
}
.ui-modal-confirm:hover { filter: brightness(1.08); }
.ui-modal-confirm.danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 6px 18px rgba(244,63,94,0.32);
}

/* —— Skeleton loading (homepage) —— */
.skel-card {
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: var(--radius-lg, 18px);
    padding: 20px; min-height: 150px;
    display: flex; flex-direction: column; gap: 12px;
}
.skel {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.04) 63%);
    background-size: 400% 100%;
    animation: skelShimmer 1.4s ease-in-out infinite;
}
.skel-tag   { width: 64px; height: 18px; border-radius: 6px; }
.skel-icon  { width: 44px; height: 44px; border-radius: 12px; margin-top: 4px; }
.skel-title { width: 70%; height: 16px; margin-top: 6px; }
.skel-desc  { width: 90%; height: 12px; }
@keyframes skelShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* —— Stare de eroare homepage —— */
.grid-error {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 60px 20px; margin: 0 auto;
    color: var(--text-secondary, #a8acb8);
}
.grid-error svg { color: var(--warning, #fbbf24); margin-bottom: 8px; opacity: .9; }
.grid-error h3 { margin: 0; font-size: 18px; color: var(--text-primary, #fff); }
.grid-error p { margin: 0 0 14px; font-size: 14px; }
.grid-error .ui-modal-btn { flex: 0 0 auto; max-width: none; padding: 10px 22px; }

/* —— Login card: nu iese din ecran pe mobil —— */
@media (max-width: 440px) {
    .login-card { width: min(400px, calc(100vw - 28px)) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM VISIBLE LAYER — micro-interactiuni vizibile (aditive, suprascriu hover-ul anterior)
   ═══════════════════════════════════════════════════════════════ */

/* Carduri: ridicare + halou de accent la hover (premium, vizibil) */
.grid-card {
    transition: transform .26s cubic-bezier(.22,1,.36,1),
                box-shadow .26s cubic-bezier(.22,1,.36,1),
                border-color .26s ease, background .26s ease !important;
    will-change: transform;
}
.grid-card:hover {
    transform: translateY(-6px) scale(1.015) !important;
    border-color: var(--border-focus, rgba(168,139,250,0.5)) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,.42),
        0 6px 18px var(--accent-glow, rgba(139,92,246,0.22)),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.grid-card:active { transform: translateY(-2px) scale(.997) !important; }
.grid-card:hover .grid-card-icon {
    transform: translateY(-1px) scale(1.06) !important;
    transition: transform .26s cubic-bezier(.22,1,.36,1) !important;
}

/* Butoane primare (login + generice): shadow de accent + lift fin la hover */
.btn-login {
    transition: transform .15s ease, filter .18s ease, box-shadow .22s ease !important;
    box-shadow: 0 8px 22px var(--accent-glow, rgba(139,92,246,0.28)) !important;
}
.btn-login:hover { transform: translateY(-1px) !important; filter: brightness(1.07) !important; }
.btn-login:active { transform: translateY(0) !important; }

/* Bara de sus: glass mai curat + linie de accent subtila jos */
.topbar { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }

/* Search din topbar: hover mai viu */
.topbar-search-btn { transition: border-color .18s ease, background .18s ease, transform .12s ease !important; }
.topbar-search-btn:hover { border-color: var(--border-focus, rgba(168,139,250,0.5)) !important; }

/* Inputuri: inel de focus moale, premium, peste tot */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(139,92,246,0.18)) !important;
}

/* Scroll lin in zonele de continut */
html { scroll-behavior: smooth; }

/* —— Sectiuni de categorie in grid (titluri evidente, fara tag pe card) —— */
.grid-section { margin-bottom: 6px; }
.grid-section-title {
    display: flex; align-items: center; gap: 14px;
    margin: 30px 4px 16px;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted, #868ea6);
}
.grid-section-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border, rgba(255,255,255,0.12)), transparent);
}
.grid-section:first-of-type .grid-section-title { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════
   CARDURI GRID — design colorat regândit (fiecare card poartă culoarea categoriei)
   ═══════════════════════════════════════════════════════════════ */
.grid-card {
    /* Wash subtil de culoare pe tot cardul + bară de accent plină sus */
    background:
        radial-gradient(135% 95% at 100% 0%, var(--card-glow, rgba(255,255,255,0.05)) 0%, transparent 58%),
        rgba(12, 16, 32, 0.86) !important;
    border-top: 3px solid var(--card-tag, rgba(255,255,255,0.2)) !important;
    box-shadow: 0 1px 0 var(--card-glow, transparent) inset !important;
}
.grid-card:hover {
    background:
        radial-gradient(135% 110% at 100% 0%, var(--card-glow, rgba(255,255,255,0.08)) 0%, transparent 52%),
        rgba(16, 21, 42, 0.95) !important;
    border-color: var(--card-accent, rgba(255,255,255,0.18)) !important;
    border-top-color: var(--card-tag, #fff) !important;
    box-shadow:
        0 18px 46px rgba(0,0,0,0.46),
        0 0 40px var(--card-glow, rgba(139,92,246,0.18)) !important;
}

/* Iconiță într-un tile colorat cu gradient pe culoarea categoriei */
.grid-card-icon {
    width: 46px !important; height: 46px !important;
    background: linear-gradient(145deg, var(--card-accent, rgba(255,255,255,0.10)), transparent) !important;
    border: 1px solid var(--card-accent, rgba(255,255,255,0.12)) !important;
    border-radius: 13px !important;
    color: var(--card-tag, #fff) !important;
    box-shadow: 0 6px 18px var(--card-glow, transparent), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.grid-card:hover .grid-card-icon {
    background: linear-gradient(145deg, var(--card-accent), var(--card-glow)) !important;
    border-color: var(--card-tag, rgba(255,255,255,0.3)) !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 8px 24px var(--card-glow), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Titlu putin mai mare, descriere mai lizibila */
.grid-card-title { font-size: 15.5px !important; letter-spacing: -.01em; }
.grid-card-desc { color: var(--text-secondary, #b2bacf) !important; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════
   INNER UI PREMIUM — toate paginile de tool (componente COMUNE)
   Tab-uri, inputuri, butoane, header, tabele — coerent pe violet
   ═══════════════════════════════════════════════════════════════ */

/* —— Bara de tab-uri: segmented control premium cu iconițe —— */
.tool-tabs {
    background: rgba(0,0,0,0.28) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    border-radius: 14px !important;
}
.tool-tab-icon { display: inline-flex; align-items: center; }
.tool-tab-icon svg { width: 15px; height: 15px; }
.tool-tab.active {
    background: linear-gradient(135deg, var(--accent-hover, #8b5cf6), var(--accent, #a78bfa)) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--accent-glow, rgba(139,92,246,0.32)) !important;
}
.tool-tab.active .tool-tab-icon svg { color: #fff; }

/* —— Inputuri / select / textarea rafinate (toate formularele) —— */
.form-input, .form-select, textarea.form-input {
    padding: 12px 15px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    background: var(--bg-input, rgba(255,255,255,0.045)) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.form-input:focus, .form-select:focus, textarea.form-input:focus {
    border-color: var(--accent, #a78bfa) !important;
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(139,92,246,0.18)) !important;
    background: rgba(255,255,255,0.06) !important;
}
.form-group label { color: var(--text-secondary, #b2bacf) !important; }

/* —— Buton primar (Run) premium: gradient plin pe accent —— */
.btn-run, .btn-primary {
    background: linear-gradient(135deg, var(--accent-hover, #8b5cf6), var(--accent, #a78bfa)) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px var(--accent-glow, rgba(139,92,246,0.32)) !important;
    transition: transform .14s ease, filter .16s ease, box-shadow .2s ease !important;
}
.btn-run:hover, .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px) !important; }
.btn-run:disabled, .btn-primary:disabled { opacity: .5 !important; filter: grayscale(.3); transform: none !important; }
.btn-run .spinner { border-top-color: #fff !important; }
.btn-secondary, .btn-clear {
    border-radius: 12px !important;
    border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
    transition: background .15s ease, border-color .15s ease !important;
}
.btn-secondary:hover, .btn-clear:hover { border-color: var(--border-hover, rgba(255,255,255,0.2)) !important; }

/* —— Header de tool: badge categorie coerent cu accentul violet —— */
.header-category {
    color: var(--accent, #a78bfa) !important;
    background: var(--accent-glow, rgba(139,92,246,0.14)) !important;
    border-color: var(--accent-glow-strong, rgba(139,92,246,0.3)) !important;
}

/* —— Tabele premium (toate modulele): header clar + randuri cu hover —— */
.dp-table th, .pa-table th, .profit-table th, .profit-table-wide th, .or-table th, .ty-table th,
.ty-results-table th, .tracking-table th, .cs-store-table th, .prod-table th, .prod-store-table th, .em-preview-table th {
    background: rgba(255,255,255,0.045) !important;
    color: var(--text-secondary, #b2bacf) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
}
.dp-table td, .pa-table td, .profit-table td, .profit-table-wide td, .or-table td, .ty-table td,
.ty-results-table td, .tracking-table td, .cs-store-table td, .prod-table td, .prod-store-table td, .em-preview-table td {
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.dp-table tbody tr:hover, .pa-table tbody tr:hover, .profit-table tbody tr:hover, .or-table tbody tr:hover,
.ty-table tbody tr:hover, .tracking-table tbody tr:hover, .cs-store-table tbody tr:hover,
.prod-table tbody tr:hover, .em-preview-table tbody tr:hover {
    background: var(--accent-glow, rgba(139,92,246,0.07)) !important;
}

/* —— Terminal output rafinat —— */
.log-terminal { border-radius: 14px !important; border: 1px solid var(--border, rgba(255,255,255,0.08)) !important; }
.btn-back {
    border-radius: 12px !important;
    transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
}
.btn-back:hover { transform: translateX(-2px); }

/* —— Tabele Aprovizionare (.pa-table): cifre aliniate + header/footer sticky —— */
.pa-table td.num, .pa-table .pa-num, .pa-table td.pa-num { font-variant-numeric: tabular-nums; }
.pa-table thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-secondary, #11131b) !important; }
.pa-table tfoot td, .pa-table tfoot .pa-tfoot-total td {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--bg-secondary, #11131b) !important; font-weight: 700;
}

/* —— Rapoarte → Profitabilitate: rând în pierdere evidențiat —— */
.profit-table tbody tr.profit-row-loss td { background: rgba(248,113,113,0.07) !important; }
.profit-table tbody tr.profit-row-loss td:first-child { box-shadow: inset 3px 0 0 #f87171; }

/* ═══════════════════════════════════════════════════════════════
   LOOK PREMIUM — LIGHT (rapid): gradienturi STATICE, fără animații/blur scumpe
   ═══════════════════════════════════════════════════════════════ */

/* Aurora de fundal: colorată dar STATICĂ (desenată o dată = cost zero, fără lag) */
#starfield {
    inset: 0 !important;
    background:
        radial-gradient(46% 40% at 12% 6%,  rgba(139,92,246,0.17) 0%, transparent 55%),
        radial-gradient(44% 40% at 88% 12%, rgba(99,102,241,0.13) 0%, transparent 55%),
        radial-gradient(42% 42% at 84% 90%, rgba(236,72,153,0.10) 0%, transparent 55%),
        radial-gradient(40% 40% at 12% 94%, rgba(34,211,238,0.08) 0%, transparent 55%),
        radial-gradient(85% 70% at 50% 40%, rgba(168,139,250,0.045) 0%, transparent 75%),
        var(--bg-primary, #0a0b11) !important;
    animation: none !important;
}

/* Anulez complet animațiile scumpe adăugate anterior */
.btn-run, .btn-primary, .tool-tab.active { animation: none !important; }

/* Scot backdrop-filter-ul greu de pe carduri (rămâne doar pe form-section, 1 element) */
.grid-card, .pa-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Titluri mari cu gradient luminos (cost zero) */
.grid-welcome h2, .header-top h2 {
    background: linear-gradient(120deg, #ffffff 0%, #c4b5fd 45%, #a78bfa 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Logo halou static (cost zero) */
.topbar-logo-wrap, .login-logo {
    box-shadow: 0 0 22px var(--accent-glow-strong, rgba(139,92,246,0.35)) !important;
}

/* Card hover: glow colorat simplu (box-shadow, ieftin) — fără mask/backdrop */
.grid-card:hover {
    box-shadow:
        0 16px 38px rgba(0,0,0,0.4),
        0 0 26px var(--card-glow, rgba(139,92,246,0.16)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   APLICAT din skill ui-ux-pro-max v2.5 (dashboard data-heavy · Dark OLED · WCAG)
   ═══════════════════════════════════════════════════════════════ */

/* §6 number-tabular — cifre aliniate în TOATE tabelele (esențial pt. date/prețuri) */
table td, table th, .num, .pa-num, [class*="-table"] td { font-variant-numeric: tabular-nums; }

/* §5 horizontal-scroll — tabelele late nu mai sparg layout-ul (scroll, nu overflow) */
.pa-table-wrap, .profit-table-wrap, .profit-table-wide-wrap, .dp-table-wrap,
.ty-table-wrap, .or-table-wrap, .tracking-table-wrap, .cs-store-table-wrap,
[class*="-table-wrap"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* §8 disabled-states — opacitate 0.45 + cursor not-allowed (consistent peste tot) */
button:disabled, input:disabled, select:disabled, textarea:disabled,
.btn-run:disabled, .btn-primary:disabled, .btn-secondary:disabled, .tool-tab:disabled {
    opacity: 0.45 !important; cursor: not-allowed !important;
}

/* §2 cursor-pointer — afișaj corect pe orice element clickabil */
[onclick], summary, [role="button"], .grid-card, .tool-tab { cursor: pointer; }

/* §10 sortable-table — indicator de sortare accesibil */
th[aria-sort="ascending"]::after { content: ' ▲'; opacity: .7; font-size: .8em; }
th[aria-sort="descending"]::after { content: ' ▼'; opacity: .7; font-size: .8em; }

/* Style (Dark OLED): glow minimal pe titlul principal — efectul recomandat */
.grid-welcome h2 { text-shadow: 0 0 26px rgba(168,139,250,0.22); }

/* —— Sub-tab nested (ex. Performanță zilnică SUB Profitabilitate) —— */
.tool-tab-sub {
    margin-left: 8px;
    padding-left: 15px;
    border-left: 1px solid var(--border, rgba(255,255,255,0.14));
    font-size: 12.5px;
}
.tool-tab-sub:not(.active) { color: var(--text-muted, #868ea6); }
.tool-tab-subarrow { opacity: .5; font-size: 13px; margin-right: 1px; }
.tool-tab-sub.active .tool-tab-subarrow { opacity: .85; color: #fff; }

/* —— Bara UNICĂ Profitabilitate: tab-uri scrollabile + acțiuni FIXE (Generare/⚙) —— */
.profit-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.profit-bar .tool-tabs-profit { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.tool-tabs-profit { align-items: center; }
.profit-bar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.tool-tabs-div {
    flex: 0 0 auto; width: 1px; height: 22px;
    background: var(--border, rgba(255,255,255,0.16)); margin: 0 8px;
}
.profit-action-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 9px 16px; border-radius: 10px;
    background: var(--bg-input, rgba(255,255,255,0.05));
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-secondary, #b2bacf);
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.profit-action-btn .tool-tab-icon { display: inline-flex; align-items: center; }
.profit-action-btn .tool-tab-icon svg { width: 15px; height: 15px; }
.profit-action-btn:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.09));
    color: var(--text-primary, #fff);
    border-color: var(--border-hover, rgba(255,255,255,0.22));
}
.profit-action-icon { padding: 9px; }
.profit-action-icon svg { width: 18px; height: 18px; }
.profit-action-btn.active {
    background: var(--accent-glow, rgba(139,92,246,0.18));
    border-color: var(--accent, #a78bfa); color: #fff;
}
/* Generare = acțiune primară (gradient accent) */
.profit-action-btn[data-pview="run"] {
    background: linear-gradient(135deg, var(--accent-hover, #8b5cf6), var(--accent, #a78bfa));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px var(--accent-glow, rgba(139,92,246,0.3));
}
.profit-action-btn[data-pview="run"]:hover { filter: brightness(1.08); border-color: transparent; }