:root {
    /* Shopify Polaris inspired tokens + SHOPLINE brand blue adaptation */
    --p-shopline-blue: #2f6bff;
    --p-shopline-blue-hover: #2557d6;
    --p-shopline-blue-active: #1d46b2;
    --p-shopline-blue-soft: #eef4ff;
    --p-shopline-blue-border: #bfd1ff;

    --p-bg: #f6f6f7;
    --p-bg-app: #f1f2f4;
    --p-bg-surface: #ffffff;
    --p-bg-surface-secondary: #f7f7f8;
    --p-bg-surface-tertiary: #fafafa;
    --p-bg-surface-hover: #f2f3f5;
    --p-bg-fill: #f1f2f4;
    --p-bg-fill-hover: #e9ebef;
    --p-border: #d4d7dc;
    --p-border-subdued: #e3e5e8;
    --p-border-strong: #b8bcc2;
    --p-text: #202223;
    --p-text-subdued: #61666b;
    --p-text-muted: #8c9196;
    --p-text-inverse: #ffffff;
    --p-icon: #5c5f62;
    --p-icon-subdued: #8c9196;

    --p-primary: var(--p-shopline-blue);
    --p-primary-hover: var(--p-shopline-blue-hover);
    --p-primary-active: var(--p-shopline-blue-active);
    --p-focus: var(--p-shopline-blue);

    --p-success: #008060;
    --p-success-bg: #e6f4ea;
    --p-success-border: #aee9d1;
    --p-warning: #916a00;
    --p-warning-bg: #fff4d6;
    --p-warning-border: #ffd79d;
    --p-critical: #d72c0d;
    --p-critical-bg: #fff1f0;
    --p-critical-border: #fed3d1;
    --p-info: var(--p-shopline-blue);
    --p-info-bg: var(--p-shopline-blue-soft);
    --p-info-border: var(--p-shopline-blue-border);
    --p-purple: #5c6ac4;
    --p-purple-bg: #f4f5ff;

    --p-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.05);
    --p-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(63, 63, 68, 0.12);
    --p-shadow-popover: 0 8px 24px rgba(63, 63, 68, 0.18), 0 2px 6px rgba(63, 63, 68, 0.10);
    --p-shadow-modal: 0 26px 80px rgba(0, 0, 0, 0.24), 0 0 1px rgba(0, 0, 0, 0.18);

    --p-radius-050: 4px;
    --p-radius-100: 6px;
    --p-radius-200: 8px;
    --p-radius-300: 12px;
    --p-radius-card: 12px;
    --p-control-h: 36px;
    --p-control-h-lg: 40px;
    --p-font: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
    --p-shopline-blue: #6d95ff;
    --p-shopline-blue-hover: #82a6ff;
    --p-shopline-blue-active: #4d7dff;
    --p-shopline-blue-soft: rgba(77, 125, 255, 0.16);
    --p-shopline-blue-border: rgba(125, 164, 255, 0.44);

    --p-bg: #111213;
    --p-bg-app: #17181a;
    --p-bg-surface: #202124;
    --p-bg-surface-secondary: #282a2f;
    --p-bg-surface-tertiary: #24262a;
    --p-bg-surface-hover: #30333a;
    --p-bg-fill: #2a2d33;
    --p-bg-fill-hover: #343842;
    --p-border: #3d4148;
    --p-border-subdued: #32363d;
    --p-border-strong: #59606b;
    --p-text: #f4f6fb;
    --p-text-subdued: #c6ceda;
    --p-text-muted: #9da7b5;
    --p-text-inverse: #0f1115;
    --p-icon: #c6ceda;
    --p-icon-subdued: #9da7b5;
    --p-primary: var(--p-shopline-blue);
    --p-primary-hover: var(--p-shopline-blue-hover);
    --p-primary-active: var(--p-shopline-blue-active);
    --p-focus: #8ab4ff;
    --p-success: #7bc9a4;
    --p-success-bg: rgba(0, 128, 96, 0.22);
    --p-success-border: rgba(123, 201, 164, 0.38);
    --p-warning: #ffd57a;
    --p-warning-bg: rgba(185, 137, 0, 0.20);
    --p-warning-border: rgba(255, 213, 122, 0.40);
    --p-critical: #ff8a7a;
    --p-critical-bg: rgba(215, 44, 13, 0.18);
    --p-critical-border: rgba(255, 138, 122, 0.38);
    --p-info: #8fb2ff;
    --p-info-bg: rgba(77, 125, 255, 0.16);
    --p-info-border: rgba(125, 164, 255, 0.38);
    --p-purple: #b3bcff;
    --p-purple-bg: rgba(92, 106, 196, 0.18);
    --p-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.04);
    --p-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 4px rgba(0, 0, 0, 0.34);
    --p-shadow-popover: 0 16px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.28);
    --p-shadow-modal: 0 26px 80px rgba(0, 0, 0, 0.62), 0 0 1px rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }
html { background: var(--p-bg); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--p-font);
    color: var(--p-text);
    background: var(--p-bg);
    padding: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
    outline: 2px solid var(--p-focus);
    outline-offset: 2px;
}

/* Polaris App Home surface */
.container {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px 24px 32px;
}
.app-shell { display: grid; gap: 16px; }

/* Page header / title bar */
.console-topbar {
    position: relative;
    z-index: 200;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.title-block { min-width: 0; }
.title-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    box-shadow: var(--p-shadow-xs);
}
.title-kicker i { color: var(--p-icon-subdued); font-size: 12px; }
.title-block h1 {
    margin: 0;
    color: var(--p-text);
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.title-block p {
    margin: 8px 0 0;
    color: var(--p-text-subdued);
    font-size: 13px;
    line-height: 1.55;
    max-width: 660px;
}
.header-actions {
    position: relative;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 420px;
}
.header-actions .btn,
.header-actions .language-select-wrap {
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
}
.header-actions .btn {
    padding: 0 10px;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.header-actions .btn i { font-size: 12px; }
.header-actions .language-select-wrap {
    min-width: 150px;
    padding: 0 10px;
    gap: 7px;
}
.header-actions .language-select { min-width: 0; font-size: 12px; }

/* Form controls */
.language-select-wrap,
.search-input,
.date-field input {
    border-radius: var(--p-radius-100);
    border: 1px solid var(--p-border-strong);
    background: var(--p-bg-surface);
    color: var(--p-text);
    box-shadow: var(--p-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.language-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--p-control-h);
    cursor: pointer;
}
.language-select-wrap::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin: -3px 2px 0 3px;
    border-right: 1.5px solid var(--p-icon-subdued);
    border-bottom: 1.5px solid var(--p-icon-subdued);
    transform: rotate(45deg);
    pointer-events: none;
}
.language-select-wrap:hover {
    border-color: var(--p-border-strong);
    background: var(--p-bg-surface-tertiary);
}
.search-input:hover,
.date-field input:hover { border-color: var(--p-border-strong); background: var(--p-bg-surface-tertiary); }
.language-select-wrap:focus-within {
    border-color: var(--p-border-strong);
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-xs), 0 0 0 2px color-mix(in srgb, var(--p-border-strong) 22%, transparent);
    outline: none;
}
.search-input:focus,
.date-field input:focus {
    border-color: var(--p-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-focus) 24%, transparent);
    background: var(--p-bg-surface);
    outline: none;
}
.language-select-wrap i {
    width: 15px;
    flex: 0 0 15px;
    color: var(--p-icon-subdued);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}
.language-select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
    color: var(--p-text);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.language-select:focus,
.language-select:focus-visible,
.language-select:active {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.language-select option { color: #202223; background: #fff; }
:root[data-theme="dark"] .language-select option { color: #f4f6fb; background: #202124; }
.search-wrap { position: relative; }
.search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-icon-subdued);
    font-size: 14px;
    pointer-events: none;
}
.search-input, .date-field input {
    width: 100%;
    height: var(--p-control-h-lg);
    font-size: 13px;
    font-weight: 450;
}
.search-input { padding: 0 12px 0 38px; }
.date-field input { padding: 0 12px; }
.search-input::placeholder { color: var(--p-text-muted); opacity: 1; }
.date-field { display: grid; gap: 6px; }
.date-field label { font-size: 12px; font-weight: 600; color: var(--p-text-subdued); }
.date-grid { display: grid; gap: 10px; }

/* Buttons: Polaris button semantics + SHOPLINE blue primary */
.btn {
    height: var(--p-control-h);
    padding: 0 13px;
    border-radius: var(--p-radius-100);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease, opacity .15s ease;
    white-space: nowrap;
    user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn i { color: currentColor; font-size: 13px; }
.btn-primary {
    color: #ffffff;
    background: var(--p-primary);
    border-color: var(--p-primary);
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(47,107,255,.24);
}
.btn-primary:hover { background: var(--p-primary-hover); border-color: var(--p-primary-hover); box-shadow: 0 2px 6px rgba(47,107,255,.28); }
.btn-primary:active { background: var(--p-primary-active); border-color: var(--p-primary-active); }
.btn-outline {
    color: var(--p-text);
    background: var(--p-bg-surface);
    border-color: var(--p-border-strong);
    box-shadow: var(--p-shadow-xs);
}
.btn-outline:hover { color: var(--p-text); background: var(--p-bg-fill-hover); border-color: var(--p-border-strong); }
.btn-outline:active { background: var(--p-bg-fill); }
.btn-ghost {
    height: 34px;
    padding: 0 11px;
    color: var(--p-text-subdued);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover { color: var(--p-text); background: var(--p-bg-fill); }
.btn-theme {
    border-color: var(--p-shopline-blue-border);
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
}
.btn-theme:hover { border-color: var(--p-primary); color: var(--p-primary-hover); background: color-mix(in srgb, var(--p-shopline-blue-soft) 82%, var(--p-bg-surface)); }
:root[data-theme="dark"] .btn-outline {
    color: var(--p-text);
    background: rgba(255,255,255,0.035);
    border-color: var(--p-border-strong);
}
:root[data-theme="dark"] .btn-outline:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.075);
    border-color: var(--p-shopline-blue-border);
}
:root[data-theme="dark"] .btn-theme {
    color: #ffffff;
    background: rgba(77,125,255,0.18);
    border-color: var(--p-shopline-blue-border);
}
:root[data-theme="dark"] .btn-theme:hover { background: rgba(77,125,255,0.26); border-color: var(--p-shopline-blue-hover); }
:root[data-theme="dark"] .btn-primary { color: #fff; box-shadow: 0 2px 8px rgba(77,125,255,.34); }

/* Export menu / popover */
.export-menu { position: relative; z-index: 260; }
.export-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 254px;
    padding: 6px;
    border: 1px solid var(--p-border-subdued);
    border-radius: var(--p-radius-300);
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-popover);
    z-index: 9999;
    display: none;
}
.export-dropdown.active { display: block; animation: polarisMenuIn .14s ease; }
.export-option {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--p-text);
    border-radius: var(--p-radius-100);
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
}
.export-option i { color: var(--p-icon); width: 16px; text-align: center; }
.export-option:hover { background: var(--p-bg-fill); color: var(--p-text); }
.export-option:hover i { color: var(--p-primary); }

/* Main layout */
.workbench {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.control-panel, .results-panel {
    border: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
    border-radius: var(--p-radius-card);
    box-shadow: var(--p-shadow-card);
    overflow: hidden;
}
.control-panel { position: sticky; top: 16px; }
.panel-head, .results-head {
    padding: 16px;
    border-bottom: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
}
.panel-title, .table-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--p-text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
}
.panel-title .icon-box, .table-title .icon-box {
    width: 28px;
    height: 28px;
    border-radius: var(--p-radius-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
    box-shadow: none;
    flex: 0 0 auto;
}
.panel-title .icon-box i, .table-title .icon-box i { font-size: 13px; }
.panel-desc {
    margin: 9px 0 0;
    color: var(--p-text-subdued);
    font-size: 12px;
    line-height: 1.5;
}
.control-body { padding: 16px; }
.control-stack { display: grid; gap: 16px; }
.control-section { display: grid; gap: 8px; }
.section-label {
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p-text);
}
.action-grid { display: grid; gap: 8px; }
.action-grid .btn { width: 100%; }

/* Informational banners */
.range-note, .task-note {
    border: 1px solid var(--p-info-border);
    background: var(--p-info-bg);
    color: var(--p-info);
    border-radius: var(--p-radius-200);
    padding: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.range-note i, .task-note i { margin-top: 2px; color: currentColor; }
.range-note.error, .task-note.error {
    color: var(--p-critical);
    border-color: var(--p-critical-border);
    background: var(--p-critical-bg);
}
.task-note { display: none; margin-top: 14px; }
.task-note.active { display: flex; }
.task-note.success {
    color: var(--p-success);
    border-color: var(--p-success-border);
    background: var(--p-success-bg);
}

/* Results header */
.results-panel { min-width: 0; }
.results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.table-title-text { display: grid; gap: 3px; }
.table-subtitle {
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.45;
}
.badge, .refund-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    min-height: 22px;
    border-radius: 999px;
    background: var(--p-success-bg);
    border: 1px solid var(--p-success-border);
    color: var(--p-success);
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
    white-space: nowrap;
}
.badge i { font-size: 11px; }
.refund-type-badge {
    color: var(--p-info);
    background: var(--p-info-bg);
    border-color: var(--p-info-border);
}
.refund-type-badge.full-refund {
    color: var(--p-info);
    border-color: var(--p-info-border);
    background: var(--p-info-bg);
}
.refund-type-badge.partial-refund {
    color: var(--p-warning);
    border-color: var(--p-warning-border);
    background: var(--p-warning-bg);
}

/* KPI cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
}
.stat-card {
    min-height: 80px;
    padding: 14px 16px;
    border: 0;
    background: var(--p-bg-surface);
    box-shadow: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}
.stat-card:last-child { border-right: 0; }
.stat-card::after { display: none; }
.stat-card:hover { background: var(--p-bg-surface-tertiary); }
.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--p-radius-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
    box-shadow: none;
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
}
.stat-card:nth-child(2) .stat-icon { color: var(--p-critical); background: var(--p-critical-bg); border-color: var(--p-critical-border); }
.stat-card:nth-child(3) .stat-icon { color: var(--p-success); background: var(--p-success-bg); border-color: var(--p-success-border); }
.stat-card:nth-child(4) .stat-icon { color: var(--p-info); background: var(--p-info-bg); border-color: var(--p-info-border); }
.stat-icon i { font-size: 14px; }
.stat-label {
    margin-bottom: 5px;
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
    grid-column: 2;
    min-width: 0;
}
.stat-value {
    color: var(--p-text);
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.18;
    font-weight: 650;
    letter-spacing: -0.006em;
    position: relative;
    z-index: 1;
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Compact multi-currency KPI summaries */
.currency-stat-card {
    min-height: 112px;
    align-items: start;
    grid-template-rows: auto auto auto;
    row-gap: 5px;
}
.currency-stat-card .stat-icon { grid-row: 1 / span 3; }
.stat-label-row {
    grid-column: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.stat-label-row .stat-label { grid-column: auto; margin-bottom: 0; }
.currency-count-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    max-width: 104px;
    padding: 2px 7px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 999px;
    background: var(--p-bg-fill);
    color: var(--p-text-subdued);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.currency-count-badge[hidden] { display: none !important; }
.currency-summary {
    grid-column: 2;
    min-width: 0;
    display: grid;
    gap: 4px;
}
.currency-summary-line {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
}
.currency-code-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    max-width: 68px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 6px;
    background: var(--p-bg-surface-secondary);
    color: var(--p-text-subdued);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.currency-summary-amount {
    min-width: 0;
    color: var(--p-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.refund-currency-stat .currency-summary-amount { color: var(--p-critical); }
.currency-view-all {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--p-primary);
    font: inherit;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.currency-view-all:hover { color: var(--p-primary-hover); text-decoration: underline; }
.currency-view-all:focus-visible { border-radius: 3px; }
.currency-view-all[hidden] { display: none !important; }
.stat-empty { color: var(--p-text-muted); font-size: 15px; font-weight: 650; }

/* Currency breakdown drawer */
body.currency-drawer-open { overflow: hidden; }
.currency-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
    justify-content: flex-end;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
}
.currency-drawer-backdrop.active { display: flex; animation: currencyBackdropIn .16s ease; }
.currency-drawer {
    width: min(440px, 100%);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--p-bg-surface);
    border-left: 1px solid var(--p-border-subdued);
    box-shadow: -18px 0 48px rgba(15, 23, 42, .20);
    animation: currencyDrawerIn .20s ease;
}
.currency-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--p-border-subdued);
}
.currency-drawer-heading { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.currency-drawer-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--p-shopline-blue-border);
    border-radius: 10px;
    background: var(--p-shopline-blue-soft);
    color: var(--p-primary);
}
.currency-drawer-heading h3 { margin: 0; color: var(--p-text); font-size: 17px; line-height: 1.35; font-weight: 750; }
.currency-drawer-heading p { margin: 4px 0 0; color: var(--p-text-subdued); font-size: 12px; line-height: 1.45; }
.currency-drawer-close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--p-text-subdued);
    cursor: pointer;
}
.currency-drawer-close:hover { background: var(--p-bg-fill); color: var(--p-text); }
.currency-drawer-body { min-height: 0; overflow: auto; padding: 18px 20px 24px; }
.currency-drawer-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.currency-drawer-count { color: var(--p-text); font-size: 13px; font-weight: 750; }
.currency-drawer-context { color: var(--p-text-muted); font-size: 11px; text-align: right; }
.currency-drawer-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border: 1px solid var(--p-info-border);
    border-radius: 9px;
    background: var(--p-info-bg);
    color: var(--p-info);
    font-size: 11px;
    line-height: 1.55;
}
.currency-drawer-note i { margin-top: 2px; flex: 0 0 auto; }
.currency-export-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 10px;
    background: var(--p-bg-surface-secondary);
}
.currency-export-toolbar-copy { min-width: 0; display: grid; gap: 3px; }
.currency-export-toolbar-copy strong { color: var(--p-text); font-size: 12px; font-weight: 750; }
.currency-export-toolbar-copy span { color: var(--p-text-muted); font-size: 10px; line-height: 1.45; }
.currency-export-format {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 9px;
    background: var(--p-bg-fill);
}
.currency-export-format-option { position: relative; cursor: pointer; }
.currency-export-format-option input { position: absolute; opacity: 0; pointer-events: none; }
.currency-export-format-option span {
    min-width: 70px;
    height: 30px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 7px;
    color: var(--p-text-subdued);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.currency-export-format-option input:checked + span {
    color: var(--p-primary);
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-xs);
}
.currency-export-format-option input:focus-visible + span { outline: 2px solid var(--p-focus); outline-offset: 1px; }
.currency-breakdown-list { display: grid; gap: 8px; }
.currency-breakdown-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px 11px;
    min-height: 84px;
    padding: 11px 12px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 10px;
    background: var(--p-bg-surface);
}
.currency-breakdown-row:hover { border-color: var(--p-border-strong); background: var(--p-bg-surface-tertiary); }
.currency-breakdown-rank {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--p-bg-fill);
    color: var(--p-text-muted);
    font-size: 10px;
    font-weight: 750;
}
.currency-breakdown-main { min-width: 0; }
.currency-breakdown-code { color: var(--p-text); font-size: 13px; font-weight: 750; letter-spacing: .025em; }
.currency-breakdown-meta { margin-top: 3px; color: var(--p-text-muted); font-size: 10px; line-height: 1.4; }
.currency-breakdown-amount {
    max-width: 190px;
    color: var(--p-text);
    font-size: 15px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.currency-breakdown-actions { grid-column: 2 / 4; display: flex; justify-content: flex-end; }
.currency-export-button {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--p-shopline-blue-border);
    border-radius: 8px;
    background: var(--p-shopline-blue-soft);
    color: var(--p-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.currency-export-button:hover { background: color-mix(in srgb, var(--p-shopline-blue-soft) 78%, var(--p-bg-surface)); border-color: var(--p-primary); }
.currency-export-button:active { transform: translateY(1px); }
.currency-export-button:disabled { opacity: .58; cursor: progress; transform: none; }
.currency-export-button:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }
.currency-breakdown-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--p-text-muted);
    font-size: 12px;
    text-align: center;
}
.currency-breakdown-empty i { font-size: 24px; color: var(--p-icon-subdued); }
@keyframes currencyDrawerIn { from { transform: translateX(24px); opacity: .55; } to { transform: translateX(0); opacity: 1; } }
@keyframes currencyBackdropIn { from { opacity: 0; } to { opacity: 1; } }

/* Table: Polaris IndexTable-like */
.table-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.table-header { display: none; }
.table-wrap {
    overflow: auto;
    background: var(--p-bg-surface);
}

.table-pagination {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
}
.table-pagination.active { display: flex; }
.pagination-summary {
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 500;
}
.pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pagination-page {
    min-width: 88px;
    text-align: center;
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 500;
}
.page-size-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 500;
}
.page-size-select-wrap select {
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--p-border-strong);
    background: var(--p-bg-surface);
    color: var(--p-text);
    font-size: 12px;
    outline: none;
}
.page-size-select-wrap select:focus {
    border-color: var(--p-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-focus) 22%, transparent);
}
.btn.btn-pagination {
    height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
    gap: 5px;
}
.btn.btn-pagination i { font-size: 11px; }
@media (max-width: 720px) {
    .table-pagination { align-items: stretch; flex-direction: column; }
    .pagination-controls { justify-content: space-between; }
    .pagination-page { min-width: auto; }
}
.table-wrap table, table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1460px;
    font-size: 13px;
    table-layout: fixed;
}
th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    text-align: left;
    color: var(--p-text-subdued);
    background: var(--p-bg-surface-secondary);
    border-bottom: 1px solid var(--p-border-subdued);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
}
td {
    padding: 13px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--p-border-subdued);
    color: var(--p-text);
    line-height: 1.4;
}
.table-wrap th:nth-child(1), .table-wrap td:nth-child(1) { width: 178px; }
.table-wrap th:nth-child(2), .table-wrap td:nth-child(2) { width: 76px; }
.table-wrap th:nth-child(3), .table-wrap td:nth-child(3) { width: 110px; }
.table-wrap th:nth-child(4), .table-wrap td:nth-child(4) { width: 110px; }
.table-wrap th:nth-child(5), .table-wrap td:nth-child(5) { width: 104px; }
.table-wrap th:nth-child(6), .table-wrap td:nth-child(6) { width: 96px; }
.table-wrap th:nth-child(7), .table-wrap td:nth-child(7) { width: 92px; }
.table-wrap th:nth-child(8), .table-wrap td:nth-child(8) { width: 140px; }
.table-wrap th:nth-child(9), .table-wrap td:nth-child(9) { width: 96px; }
.table-wrap th:nth-child(10), .table-wrap td:nth-child(10) { width: 150px; }
.table-wrap th:nth-child(11), .table-wrap td:nth-child(11) { width: 210px; }
tbody tr { background: var(--p-bg-surface); }
tbody tr:hover { background: var(--p-bg-surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
.order-id-cell { min-width: 0; vertical-align: middle; }
.order-id-cell > .order-id-stack { width: 100%; }
.order-id-stack { display: grid; gap: 4px; min-width: 0; align-content: center; }
.order-id-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.order-link, .order-id-main a {
    color: var(--p-primary);
    text-decoration: none;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.order-link:hover, .order-id-main a:hover { text-decoration: underline; }
.order-id-main .order-link-text {
    display: inline-block;
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-id-full {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--p-text-muted);
    font-size: 12px;
    font-weight: 450;
}
.datetime-cell { color: var(--p-text); }
.datetime-stack {
    display: grid;
    gap: 2px;
    align-content: center;
    line-height: 1.35;
}
.datetime-date,
.datetime-time {
    display: block;
    white-space: nowrap;
}
.datetime-time { color: var(--p-text-subdued); font-size: 12px; }
.amount-refund { color: var(--p-critical); font-weight: 700; }
.amount-order { color: var(--p-text); font-weight: 650; }
.note-cell {
    color: var(--p-text);
    font-weight: 450;
    max-width: 220px;
    min-width: 180px;
}
.note-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    cursor: help;
}
.items-cell { max-width: 150px; font-weight: 500; }
.items-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
}
.refund-detail-cell {
    min-width: 180px;
    max-width: 240px;
    color: var(--p-text-subdued);
    font-size: 12px;
    line-height: 1.45;
}
.refund-detail-lines {
    display: grid;
    gap: 3px;
}
.refund-detail-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shipping-refund-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    min-width: 34px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.shipping-refund-badge.yes {
    color: var(--p-success);
    background: var(--p-success-bg);
    border: 1px solid var(--p-success-border);
}
.shipping-refund-badge.no {
    color: var(--p-text-muted);
    background: var(--p-bg-fill);
    border: 1px solid var(--p-border-subdued);
}
.muted { color: var(--p-text-muted); }

/* Loading / empty / error states */
.state-box {
    display: none;
    padding: 72px 24px;
    text-align: center;
    background: var(--p-bg-surface);
}
.state-box.active { display: block; }
.state-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
    font-size: 22px;
}
.state-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--p-text); }
.state-desc { color: var(--p-text-subdued); max-width: 460px; margin: 0 auto; line-height: 1.65; font-size: 13px; }
.footer-note {
    color: var(--p-text-subdued);
    font-size: 12px;
    line-height: 1.6;
    margin-top: 14px;
}

/* Authorization gate */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--p-bg) 86%, transparent);
    backdrop-filter: blur(12px);
}
.auth-gate.active { display: grid; }
.auth-gate.leaving { animation: authGateFadeOut .28s ease forwards; }
.auth-panel {
    width: min(460px, 100%);
    border: 1px solid var(--p-border-subdued);
    border-radius: 16px;
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-modal);
    padding: 28px;
    text-align: center;
}
.auth-orb {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 24px;
    background: var(--p-primary);
    box-shadow: 0 8px 20px rgba(47, 107, 255, 0.28);
}
.auth-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--p-text); }
.auth-desc { margin: 10px auto 20px; color: var(--p-text-subdued); font-size: 13px; line-height: 1.65; max-width: 340px; }
.auth-progress {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--p-bg-fill);
}
.auth-progress-bar {
    height: 100%; width: 42%; border-radius: inherit;
    background: var(--p-primary);
    animation: authProgress 1.15s ease-in-out infinite alternate;
}
.auth-gate.success .auth-progress-bar { width: 100%; animation: none; background: var(--p-success); }
.auth-gate.redirecting .auth-progress-bar { width: 72%; }
.auth-gate.error .auth-progress-bar { width: 100%; animation: none; background: var(--p-critical); }
.auth-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.auth-gate-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.auth-gate-actions[hidden] { display: none !important; }
.auth-gate-actions .btn { min-width: 132px; }
.auth-step { color: var(--p-text-muted); font-size: 11px; font-weight: 600; }

/* Modal: App Bridge/Polaris-like dialog */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(8px);
}
.app-modal-backdrop.active { display: grid; animation: fadeIn .14s ease; }
.app-modal {
    width: min(450px, 100%);
    border-radius: 16px;
    border: 1px solid var(--p-border-subdued);
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-modal);
    overflow: hidden;
}
.app-modal-inner { padding: 24px 24px 12px; text-align: left; }
.app-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0 0 14px;
    display: grid;
    place-items: center;
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
    font-size: 18px;
}
.app-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--p-text); }
.app-modal-desc { margin: 10px 0 0; color: var(--p-text-subdued); font-size: 13px; line-height: 1.65; }
.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 20px;
}
.app-modal-actions .btn { min-width: 88px; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes polarisMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authProgress { from { transform: translateX(-10%); width: 38%; } to { transform: translateX(145%); width: 54%; } }
@keyframes authGateFadeOut { to { opacity: 0; transform: scale(1.006); } }

@media (max-width: 1180px) {
    .workbench { grid-template-columns: 1fr; }
    .control-panel { position: static; }
    .control-body .control-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .range-note, .task-note { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .container { padding: 16px; }
    .console-topbar { flex-direction: column; align-items: stretch; }
    .header-actions { min-width: 0; justify-content: flex-start; }
    .control-body .control-stack { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card:nth-child(2) { border-right: 0; }
    .stat-card:nth-child(1), .stat-card:nth-child(2) { border-bottom: 1px solid var(--p-border-subdued); }
}
@media (max-width: 560px) {
    .header-actions > *, .header-actions .btn, .export-menu, .export-menu .btn { width: 100%; }
    .language-select-wrap { width: 100%; justify-content: space-between; }
    .language-select { flex: 1; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { border-right: 0; border-bottom: 1px solid var(--p-border-subdued); }
    .stat-card:last-child { border-bottom: 0; }
    .app-modal-actions { flex-direction: column-reverse; }
    .app-modal-actions .btn { width: 100%; }
}



/* Unified Feedback Center */
.feedback-unread-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--p-critical);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
}
.feedback-unread-badge[hidden] { display: none !important; }
.feedback-center-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(8px);
}
.feedback-center-backdrop.active { display: grid; }
.feedback-center {
    width: min(1040px, 100%);
    height: min(720px, calc(100vh - 48px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--p-border-subdued);
    border-radius: 16px;
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-modal);
}
.feedback-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--p-border-subdued);
}
.feedback-center-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.feedback-center-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    color: var(--p-primary); background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
}
.feedback-center-title h3 { margin: 0; font-size: 16px; font-weight: 750; }
.feedback-center-title p { margin: 3px 0 0; color: var(--p-text-subdued); font-size: 12px; }
.feedback-close {
    width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: transparent; color: var(--p-text-subdued); cursor: pointer;
}
.feedback-close:hover { background: var(--p-bg-fill); color: var(--p-text); }
.feedback-center-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }
.feedback-sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--p-border-subdued); }
.feedback-sidebar-actions { padding: 14px; border-bottom: 1px solid var(--p-border-subdued); }
.feedback-sidebar-actions .btn { width: 100%; }
.feedback-ticket-list { flex: 1; overflow: auto; }
.feedback-ticket-item {
    width: 100%; border: 0; border-bottom: 1px solid var(--p-border-subdued);
    background: transparent; color: var(--p-text); padding: 13px 14px;
    text-align: left; cursor: pointer;
}
.feedback-ticket-item:hover, .feedback-ticket-item.active { background: var(--p-bg-surface-hover); }
.feedback-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feedback-ticket-no { font-size: 12px; font-weight: 750; color: var(--p-primary); }
.feedback-ticket-time { color: var(--p-text-muted); font-size: 10px; }
.feedback-ticket-subject { margin: 6px 0 4px; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feedback-ticket-preview { color: var(--p-text-subdued); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feedback-ticket-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.feedback-status-badge, .feedback-severity-badge {
    display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    border: 1px solid var(--p-border-subdued); background: var(--p-bg-fill); color: var(--p-text-subdued);
}
.feedback-severity-badge.blocking { color: var(--p-critical); background: var(--p-critical-bg); border-color: var(--p-critical-border); }
.feedback-severity-badge.high { color: var(--p-warning); background: var(--p-warning-bg); border-color: var(--p-warning-border); }
.feedback-ticket-unread {
    min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
    display: inline-grid; place-items: center; background: var(--p-critical); color: #fff;
    font-size: 10px; font-weight: 750; margin-left: auto;
}
.feedback-list-empty { padding: 36px 18px; text-align: center; color: var(--p-text-muted); font-size: 12px; line-height: 1.6; }
.feedback-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.feedback-empty-state { margin: auto; text-align: center; color: var(--p-text-subdued); padding: 28px; }
.feedback-empty-state i { font-size: 30px; color: var(--p-primary); margin-bottom: 12px; }
.feedback-empty-state h4 { margin: 0 0 7px; color: var(--p-text); }
.feedback-empty-state p { margin: 0; font-size: 12px; line-height: 1.6; }
.feedback-new-form { padding: 20px; overflow: auto; }
.feedback-form-title { margin: 0 0 4px; font-size: 18px; }
.feedback-form-desc { margin: 0 0 18px; color: var(--p-text-subdued); font-size: 12px; }
.feedback-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.feedback-field { display: grid; gap: 6px; margin-bottom: 13px; }
.feedback-field.full { grid-column: 1 / -1; }
.feedback-field label { color: var(--p-text); font-size: 12px; font-weight: 650; }
.feedback-field input, .feedback-field select, .feedback-field textarea {
    width: 100%; border: 1px solid var(--p-border-strong); border-radius: 8px;
    background: var(--p-bg-surface); color: var(--p-text); font: inherit;
}
.feedback-field input, .feedback-field select { height: 40px; padding: 0 11px; }
.feedback-field textarea { min-height: 160px; padding: 10px 11px; resize: vertical; line-height: 1.55; }
.feedback-field input:focus, .feedback-field select:focus, .feedback-field textarea:focus {
    outline: 2px solid color-mix(in srgb,var(--p-focus) 24%,transparent); border-color: var(--p-focus);
}
.feedback-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.feedback-inline-status { min-height: 20px; margin-right: auto; color: var(--p-text-subdued); font-size: 12px; }
.feedback-inline-status.error { color: var(--p-critical); }
.feedback-inline-status.success { color: var(--p-success); }
.feedback-chat-head { padding: 15px 18px; border-bottom: 1px solid var(--p-border-subdued); }
.feedback-chat-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.feedback-chat-head h4 { margin: 0 0 5px; font-size: 15px; }
.feedback-chat-context { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--p-text-subdued); font-size: 11px; }
.feedback-chat-status { color: var(--p-primary); font-size: 11px; font-weight: 700; }
.feedback-messages { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: var(--p-bg-surface-secondary); }
.feedback-message { display: flex; margin-bottom: 12px; }
.feedback-message.merchant { justify-content: flex-end; }
.feedback-message-bubble {
    max-width: min(650px, 78%); padding: 10px 12px; border-radius: 11px;
    border: 1px solid var(--p-border-subdued); background: var(--p-bg-surface);
    color: var(--p-text); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.feedback-message.merchant .feedback-message-bubble { background: var(--p-primary); border-color: var(--p-primary); color: #fff; }
.feedback-message-meta { margin-top: 5px; font-size: 10px; opacity: .68; }
.feedback-composer { padding: 12px 16px 15px; border-top: 1px solid var(--p-border-subdued); }
.feedback-composer textarea {
    width: 100%; min-height: 74px; max-height: 160px; resize: vertical;
    border: 1px solid var(--p-border-strong); border-radius: 8px; padding: 9px 10px;
    background: var(--p-bg-surface); color: var(--p-text); font: inherit; line-height: 1.5;
}
.feedback-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.feedback-closed-panel {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; border-top: 1px solid var(--p-success-border);
    background: var(--p-success-bg); color: var(--p-success);
    font-size: 12px; line-height: 1.55;
}
.feedback-closed-icon {
    width: 26px; height: 26px; border-radius: 999px; flex: 0 0 auto;
    display: grid; place-items: center; background: var(--p-bg-surface);
    border: 1px solid var(--p-success-border); font-size: 12px;
}
.feedback-closed-panel strong { display: block; margin-bottom: 2px; color: var(--p-success); }
@media (max-width: 800px) {
    .feedback-center-backdrop { padding: 10px; }
    .feedback-center { height: calc(100vh - 20px); }
    .feedback-center-body { grid-template-columns: 1fr; }
    .feedback-sidebar { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--p-border-subdued); }
    .feedback-form-grid { grid-template-columns: 1fr; }
}



/* v1.5.0: consolidated export workflow, task recovery, responsive metadata */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.quick-range-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.range-chip {
    min-height: 30px;
    padding: 0 7px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 8px;
    background: var(--p-bg-surface-secondary);
    color: var(--p-text-subdued);
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}
.range-chip:hover { border-color: var(--p-shopline-blue-border); color: var(--p-primary); }
.range-chip.active { border-color: var(--p-primary); background: var(--p-shopline-blue-soft); color: var(--p-primary); }

.results-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--p-text-muted);
    font-size: 11px;
    font-weight: 500;
}
.results-meta-separator { color: var(--p-border-strong); }

.export-config-modal { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto; }
.export-fieldset { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.export-fieldset legend { margin-bottom: 9px; color: var(--p-text); font-size: 12px; font-weight: 700; }
.export-choice-grid { display: grid; gap: 8px; }
.export-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 10px;
    background: var(--p-bg-surface);
    cursor: pointer;
}
.export-choice-card:hover { border-color: var(--p-shopline-blue-border); background: var(--p-bg-surface-tertiary); }
.export-choice-card:has(input:checked) { border-color: var(--p-primary); background: var(--p-shopline-blue-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--p-primary) 22%, transparent); }
.export-choice-card input { accent-color: var(--p-primary); }
.export-choice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--p-primary); background: var(--p-bg-surface); border: 1px solid var(--p-border-subdued); }
.export-choice-card strong { display: block; color: var(--p-text); font-size: 13px; line-height: 1.35; }
.export-choice-card small { display: block; margin-top: 3px; color: var(--p-text-subdued); font-size: 11px; line-height: 1.45; }
.format-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.format-choice { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border: 1px solid var(--p-border-subdued); border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 650; }
.format-choice:has(input:checked) { border-color: var(--p-primary); background: var(--p-shopline-blue-soft); color: var(--p-primary); }
.format-choice input { accent-color: var(--p-primary); }
.export-dialog-note { min-height: 18px; margin-top: 12px; color: var(--p-text-subdued); font-size: 11px; line-height: 1.5; }
.export-dialog-note.warning { color: var(--p-warning); }

.export-task-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--p-info-border);
    border-radius: 10px;
    background: var(--p-info-bg);
}
.export-task-card[hidden] { display: none !important; }
.export-task-card.success { border-color: var(--p-success-border); background: var(--p-success-bg); }
.export-task-card.error { border-color: var(--p-critical-border); background: var(--p-critical-bg); }
.export-task-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--p-info); background: var(--p-bg-surface); border: 1px solid currentColor; }
.export-task-card.success .export-task-icon { color: var(--p-success); }
.export-task-card.error .export-task-icon { color: var(--p-critical); }
.export-task-title { color: var(--p-text); font-size: 12px; font-weight: 750; line-height: 1.35; }
.export-task-desc { margin-top: 3px; color: var(--p-text-subdued); font-size: 11px; line-height: 1.45; }
.export-task-meta { margin-top: 6px; color: var(--p-text-muted); font-size: 10px; line-height: 1.4; }
.export-task-actions { display: flex; align-items: center; gap: 4px; }
.export-task-actions .btn { height: 30px; padding: 0 9px; font-size: 11px; }

.transaction-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--p-border-subdued);
    background: var(--p-bg-fill);
    color: var(--p-text-subdued);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.transaction-status-badge.success { color: var(--p-success); background: var(--p-success-bg); border-color: var(--p-success-border); }
.transaction-status-badge.pending { color: var(--p-warning); background: var(--p-warning-bg); border-color: var(--p-warning-border); }
.transaction-status-badge.failed { color: var(--p-critical); background: var(--p-critical-bg); border-color: var(--p-critical-border); }
.refund-id-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--p-text-subdued); font-size: 11px; }
.refund-ratio-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-wrap table, table { min-width: 1940px; }
.table-wrap th:nth-child(1), .table-wrap td:nth-child(1) { width: 178px; }
.table-wrap th:nth-child(2), .table-wrap td:nth-child(2) { width: 150px; }
.table-wrap th:nth-child(3), .table-wrap td:nth-child(3) { width: 88px; }
.table-wrap th:nth-child(4), .table-wrap td:nth-child(4) { width: 112px; }
.table-wrap th:nth-child(5), .table-wrap td:nth-child(5) { width: 112px; }
.table-wrap th:nth-child(6), .table-wrap td:nth-child(6) { width: 128px; }
.table-wrap th:nth-child(7), .table-wrap td:nth-child(7) { width: 112px; }
.table-wrap th:nth-child(8), .table-wrap td:nth-child(8) { width: 92px; }
.table-wrap th:nth-child(9), .table-wrap td:nth-child(9) { width: 112px; }
.table-wrap th:nth-child(10), .table-wrap td:nth-child(10) { width: 100px; }
.table-wrap th:nth-child(11), .table-wrap td:nth-child(11) { width: 152px; }
.table-wrap th:nth-child(12), .table-wrap td:nth-child(12) { width: 112px; }
.table-wrap th:nth-child(13), .table-wrap td:nth-child(13) { width: 180px; }
.table-wrap th:nth-child(14), .table-wrap td:nth-child(14) { width: 210px; }

.btn[aria-busy="true"] { cursor: progress; }

@media (max-width: 720px) {
    .quick-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .format-choice-grid { grid-template-columns: 1fr; }
    .export-choice-card { grid-template-columns: auto 30px minmax(0, 1fr); padding: 10px; }
    .export-task-card { grid-template-columns: 34px minmax(0, 1fr); }
    .export-task-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .results-meta-separator { display: none; }
    .results-meta { display: grid; gap: 2px; }
}


@media (max-width: 560px) {
    .currency-drawer { width: 100%; }
    .currency-drawer-header { padding: 16px; }
    .currency-drawer-body { padding: 14px 16px 20px; }
    .currency-export-toolbar { grid-template-columns: 1fr; }
    .currency-export-format { width: 100%; }
    .currency-export-format-option span { width: 100%; }
    .currency-breakdown-row { grid-template-columns: 26px minmax(0, 1fr); }
    .currency-breakdown-amount { grid-column: 2; max-width: none; text-align: left; font-size: 14px; }
    .currency-breakdown-actions { grid-column: 2; justify-content: stretch; }
    .currency-export-button { width: 100%; }
    .currency-stat-card { min-height: 106px; }
}

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

/* ================================================================
   Refund Operations Dashboard v2.0.0
   ================================================================ */

:root {
    --dashboard-max-width: 1560px;
    --dashboard-gap: 18px;
    --dashboard-panel-radius: 14px;
    --dashboard-header-height: 40px;
}

body.dashboard-drawer-open { overflow: hidden; }

.dashboard-page {
    width: min(100%, var(--dashboard-max-width));
    margin: 0 auto;
    padding: 26px 28px 34px;
    display: grid;
    gap: var(--dashboard-gap);
}

.dashboard-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.dashboard-title-group { min-width: 0; }
.dashboard-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dashboard-title-row h1 {
    margin: 0;
    color: var(--p-text);
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.16;
    letter-spacing: -0.025em;
    font-weight: 750;
}
.dashboard-title-group > p {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--p-text-subdued);
    font-size: 13px;
    line-height: 1.6;
}
.dashboard-context-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--p-text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.dashboard-context-row span:first-child { color: var(--p-text-subdued); font-weight: 600; }
.dashboard-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--p-success);
    background: var(--p-success-bg);
    border: 1px solid var(--p-success-border);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.dashboard-source-badge i { font-size: 10px; }

.dashboard-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    max-width: 720px;
}
.dashboard-header-actions .btn,
.dashboard-header-actions .language-select-wrap { height: 36px; min-height: 36px; }
.dashboard-header-actions .btn { padding: 0 11px; font-size: 12px; }
.dashboard-task-button { position: relative; }
.dashboard-task-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--p-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
}

.dashboard-view-bar {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 12px;
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-xs);
}
.dashboard-view-scroll {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dashboard-view-scroll::-webkit-scrollbar { display: none; }
.dashboard-view-tab {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--p-text-subdued);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.dashboard-view-tab:hover { background: var(--p-bg-fill); color: var(--p-text); }
.dashboard-view-tab.active { background: var(--p-shopline-blue-soft); color: var(--p-primary); }
.dashboard-view-tab.custom { padding: 0; overflow: hidden; }
.dashboard-view-tab.custom > button:first-child {
    min-height: 32px;
    padding: 0 5px 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.dashboard-view-remove {
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--p-icon-subdued);
    cursor: pointer;
}
.dashboard-view-remove:hover { color: var(--p-critical); background: var(--p-critical-bg); }
.dashboard-save-view-button {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px dashed var(--p-border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--p-text-subdued);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.dashboard-save-view-button:hover { border-color: var(--p-primary); color: var(--p-primary); background: var(--p-shopline-blue-soft); }

.dashboard-filter-surface,
.dashboard-panel {
    border: 1px solid var(--p-border-subdued);
    border-radius: var(--dashboard-panel-radius);
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-card);
}
.dashboard-filter-surface { padding: 17px 18px 14px; }
.dashboard-filter-header,
.dashboard-panel-header,
.dashboard-table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.dashboard-filter-header h2,
.dashboard-panel-header h2,
.dashboard-table-title h2 {
    margin: 0;
    color: var(--p-text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 720;
}
.dashboard-filter-header p,
.dashboard-panel-header p,
.dashboard-table-title p {
    margin: 5px 0 0;
    color: var(--p-text-subdued);
    font-size: 12px;
    line-height: 1.5;
}
.dashboard-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(135px, .72fr)) repeat(4, minmax(130px, .75fr));
    gap: 10px;
    margin-top: 15px;
}
.dashboard-filter-field {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--p-text-subdued);
    font-size: 11px;
    font-weight: 650;
}
.dashboard-filter-field input,
.dashboard-filter-field select,
.dashboard-modal-field input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--p-border-strong);
    border-radius: 8px;
    background: var(--p-bg-surface);
    color: var(--p-text);
    box-shadow: var(--p-shadow-xs);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    outline: none;
}
.dashboard-filter-field input:focus,
.dashboard-filter-field select:focus,
.dashboard-modal-field input:focus {
    border-color: var(--p-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-focus) 20%, transparent);
}
.dashboard-input-with-icon { position: relative; }
.dashboard-input-with-icon i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p-icon-subdued);
    font-size: 12px;
    pointer-events: none;
}
.dashboard-input-with-icon input { padding-left: 33px; }
.dashboard-filter-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}
.dashboard-quick-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-active-filters {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dashboard-filter-chip {
    max-width: 240px;
    min-height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--p-shopline-blue-border);
    border-radius: 999px;
    background: var(--p-shopline-blue-soft);
    color: var(--p-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.dashboard-filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-filter-chip:hover { border-color: var(--p-primary); }
.dashboard-range-note {
    margin-top: 11px;
    padding: 8px 10px;
    align-items: center;
}
.dashboard-range-note > i {
    flex: 0 0 auto;
    margin-top: 0;
}
.dashboard-range-note > span {
    flex: 1 1 auto;
    min-width: 0;
}
.range-note-history-button {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid currentColor;
    border-radius: var(--p-radius-200);
    background: var(--p-bg-surface);
    color: var(--p-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.range-note-history-button i { margin: 0; }
.range-note-history-button:hover { background: var(--p-shopline-blue-soft); }
.range-note-history-button:focus-visible {
    outline: 2px solid var(--p-primary);
    outline-offset: 2px;
}
.range-note-history-button:disabled { opacity: .55; cursor: not-allowed; }
.dashboard-range-note + .task-note.active { margin-top: 8px; }
@media (max-width: 720px) {
    .dashboard-range-note { align-items: flex-start; flex-wrap: wrap; }
    .dashboard-range-note > span { flex-basis: calc(100% - 28px); }
    .range-note-history-button { width: 100%; margin-left: 24px; }
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: minmax(145px, .8fr) minmax(160px, .9fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(150px, .85fr);
    gap: 1px;
    border: 1px solid var(--p-border-subdued);
    border-radius: var(--dashboard-panel-radius);
    overflow: hidden;
    background: var(--p-border-subdued);
    box-shadow: var(--p-shadow-card);
}
.dashboard-kpi-card {
    min-width: 0;
    min-height: 132px;
    padding: 16px 18px;
    background: var(--p-bg-surface);
    display: flex;
    flex-direction: column;
}
.dashboard-kpi-card:hover { background: var(--p-bg-surface-tertiary); }
.dashboard-kpi-clickable { cursor: pointer; }
.dashboard-kpi-clickable:focus-visible { outline: 2px solid var(--p-focus); outline-offset: -2px; }
.dashboard-kpi-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.dashboard-kpi-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--p-primary);
    background: var(--p-shopline-blue-soft);
    border: 1px solid var(--p-shopline-blue-border);
    font-size: 12px;
}
.dashboard-kpi-icon.critical { color: var(--p-critical); background: var(--p-critical-bg); border-color: var(--p-critical-border); }
.dashboard-kpi-icon.success { color: var(--p-success); background: var(--p-success-bg); border-color: var(--p-success-border); }
.dashboard-kpi-icon.order-amount { color: #7c3aed; background: rgba(124, 58, 237, .08); border-color: rgba(124, 58, 237, .22); }
.dashboard-kpi-icon.warning { color: var(--p-warning); background: var(--p-warning-bg); border-color: var(--p-warning-border); }
.dashboard-kpi-label {
    min-width: 0;
    color: var(--p-text-subdued);
    font-size: 12px;
    font-weight: 650;
}
.dashboard-kpi-value {
    margin-top: 14px;
    color: var(--p-text);
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}
.dashboard-kpi-support {
    margin-top: auto;
    padding-top: 10px;
    color: var(--p-text-muted);
    font-size: 11px;
    line-height: 1.45;
}
.dashboard-currency-summary { margin-top: 12px; }
.dashboard-currency-summary .currency-summary-line { min-height: 25px; }
.amount-kpi-card .dashboard-currency-summary { min-height: 54px; }
.amount-kpi-card .currency-view-all { min-height: 27px; display: inline-flex; align-items: flex-end; }
.dashboard-kpi-currency-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.dashboard-kpi-currency-foot .currency-summary.compact { display: none; }
.dashboard-kpi-card .currency-view-all { margin-top: auto; padding-top: 8px; }
.dashboard-kpi-card .currency-count-badge { margin-left: auto; }

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(320px, .88fr);
    gap: var(--dashboard-gap);
}
.dashboard-panel { min-width: 0; overflow: hidden; }
.dashboard-panel-header { padding: 16px 18px 10px; }
.dashboard-chart-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.dashboard-chart-controls select {
    height: 32px;
    max-width: 145px;
    padding: 0 8px;
    border: 1px solid var(--p-border-strong);
    border-radius: 8px;
    background: var(--p-bg-surface);
    color: var(--p-text);
    font: inherit;
    font-size: 11px;
}
.dashboard-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 8px;
    background: var(--p-bg-fill);
}
.dashboard-segmented-control button,
.dashboard-density-control button {
    min-width: 48px;
    height: 27px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--p-text-subdued);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.dashboard-segmented-control button:hover,
.dashboard-density-control button:hover { color: var(--p-text); }
.dashboard-segmented-control button.active,
.dashboard-density-control button.active { background: var(--p-bg-surface); color: var(--p-primary); box-shadow: var(--p-shadow-xs); }
.dashboard-chart-legend {
    min-height: 24px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--p-text-muted);
    font-size: 11px;
}
.dashboard-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-bar { width: 10px; height: 10px; border-radius: 3px; background: var(--p-primary); }
.legend-line { width: 14px; height: 2px; border-radius: 2px; background: var(--p-critical); }
.dashboard-trend-chart { min-height: 278px; padding: 0 10px 8px; }
.dashboard-trend-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-grid-line { stroke: var(--p-border-subdued); stroke-width: 1; }
.trend-bar { fill: color-mix(in srgb, var(--p-primary) 72%, var(--p-bg-surface)); transition: opacity .15s ease; }
.trend-bar:hover { opacity: .78; }
.trend-line { stroke: var(--p-critical); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.trend-point { fill: var(--p-bg-surface); stroke: var(--p-critical); stroke-width: 2; }
.trend-axis-label, .trend-y-label { fill: var(--p-text-muted); font-size: 10px; font-family: var(--p-font); }
.dashboard-chart-empty {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--p-text-muted);
    font-size: 12px;
    text-align: center;
}
.dashboard-chart-empty i { font-size: 25px; color: var(--p-icon-subdued); }
.dashboard-composition-list { min-height: 278px; padding: 12px 18px 18px; display: grid; align-content: start; gap: 18px; }
.dashboard-composition-row { display: grid; grid-template-columns: minmax(0, 1fr) 50px; gap: 8px 10px; align-items: center; }
.dashboard-composition-label { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--p-text-subdued); font-size: 12px; }
.dashboard-composition-label strong { color: var(--p-text); font-weight: 650; }
.composition-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--p-icon-subdued); }
.composition-dot.success, .dashboard-composition-track span.success { background: var(--p-success); }
.composition-dot.pending, .composition-dot.warning, .dashboard-composition-track span.pending, .dashboard-composition-track span.warning { background: var(--p-warning); }
.composition-dot.failed, .dashboard-composition-track span.failed { background: var(--p-critical); }
.composition-dot.info, .dashboard-composition-track span.info { background: var(--p-primary); }
.dashboard-composition-track { height: 8px; border-radius: 999px; overflow: hidden; background: var(--p-bg-fill); }
.dashboard-composition-track span { height: 100%; display: block; border-radius: inherit; background: var(--p-icon-subdued); min-width: 2px; }
.dashboard-composition-percent { color: var(--p-text-subdued); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }

.dashboard-table-panel { overflow: visible; }
.dashboard-table-toolbar { padding: 16px 18px 13px; border-bottom: 1px solid var(--p-border-subdued); }
.dashboard-table-title { min-width: 0; }
.dashboard-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.dashboard-density-control { display: inline-flex; padding: 2px; border: 1px solid var(--p-border-subdued); border-radius: 8px; background: var(--p-bg-fill); }
.dashboard-density-control button { min-width: 31px; width: 31px; padding: 0; }
.dashboard-table-meta {
    min-height: 34px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--p-border-subdued);
    color: var(--p-text-muted);
    font-size: 11px;
}
.dashboard-popover-wrap { position: relative; }
.dashboard-column-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 80;
    width: 260px;
    max-height: 420px;
    overflow: auto;
    padding: 7px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 12px;
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-popover);
}
.dashboard-column-popover-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; color: var(--p-text); font-size: 12px; }
.dashboard-column-popover-head button { border: 0; background: transparent; color: var(--p-primary); font: inherit; font-size: 11px; cursor: pointer; }
.dashboard-column-option { min-height: 34px; padding: 0 8px; display: flex; align-items: center; gap: 9px; border-radius: 7px; color: var(--p-text); font-size: 12px; cursor: pointer; }
.dashboard-column-option:hover { background: var(--p-bg-fill); }
.dashboard-column-option input { accent-color: var(--p-primary); }
.dashboard-column-option span { flex: 1; }
.dashboard-column-option i { color: var(--p-icon-subdued); font-size: 10px; }
.dashboard-column-option.locked { cursor: default; color: var(--p-text-muted); }

.dashboard-table-wrap { overflow: auto; border-radius: 0; }
.dashboard-table-wrap table { min-width: 1120px; table-layout: auto; font-size: 12px; }
.dashboard-table-wrap th { height: 42px; padding: 0 12px; white-space: nowrap; }
.dashboard-table-wrap th.numeric { text-align: right; }
.dashboard-table-wrap td { height: 58px; padding: 10px 12px; }
.dashboard-table-wrap tbody tr { cursor: pointer; }
.dashboard-table-wrap tbody tr:focus-visible { outline: 2px solid var(--p-focus); outline-offset: -2px; }
.dashboard-table-wrap tbody tr:hover { background: var(--p-bg-surface-hover); }
.dashboard-sort-button { width: 100%; min-height: 34px; padding: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
th.numeric .dashboard-sort-button { justify-content: flex-end; }
.dashboard-sort-button i { color: var(--p-icon-subdued); font-size: 10px; }
.dashboard-sort-button.active { color: var(--p-primary); }
.dashboard-order-cell { min-width: 150px; }
.dashboard-order-cell a { display: inline-flex; align-items: center; gap: 6px; color: var(--p-primary); text-decoration: none; }
.dashboard-order-cell a:hover { text-decoration: underline; }
.dashboard-order-cell a i { font-size: 9px; }
.dashboard-order-cell > span { display: block; max-width: 180px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-text-muted); font-size: 10px; }
.dashboard-numeric-cell { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-action-cell { text-align: right; }
.dashboard-row-action { color: var(--p-primary); }
.dashboard-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; }
.dashboard-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--p-border-subdued);
    background: var(--p-bg-fill);
    color: var(--p-text-subdued);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.dashboard-status-badge.success { color: var(--p-success); background: var(--p-success-bg); border-color: var(--p-success-border); }
.dashboard-status-badge.pending { color: var(--p-warning); background: var(--p-warning-bg); border-color: var(--p-warning-border); }
.dashboard-status-badge.failed { color: var(--p-critical); background: var(--p-critical-bg); border-color: var(--p-critical-border); }
.dashboard-table-panel.density-compact .dashboard-table-wrap td { height: 43px; padding-top: 6px; padding-bottom: 6px; }
.dashboard-table-panel.density-compact .items-preview,
.dashboard-table-panel.density-compact .note-preview { -webkit-line-clamp: 1; max-height: 18px; }
.dashboard-table-panel .table-pagination { border-radius: 0 0 var(--dashboard-panel-radius) var(--dashboard-panel-radius); }
.dashboard-mobile-list { display: none; }

.dashboard-footer {
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0 4px;
    color: var(--p-text-muted);
    font-size: 11px;
}

.dashboard-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    justify-content: flex-end;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(5px);
}
.dashboard-drawer-backdrop.active { display: flex; animation: fadeIn .14s ease; }
.dashboard-drawer {
    width: min(480px, 100%);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--p-bg-surface);
    border-left: 1px solid var(--p-border-subdued);
    box-shadow: -20px 0 60px rgba(15, 23, 42, .18);
    animation: dashboardDrawerIn .2s ease;
}
.dashboard-drawer-header {
    min-height: 76px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--p-border-subdued);
}
.dashboard-drawer-title-wrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dashboard-drawer-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--p-primary); background: var(--p-shopline-blue-soft); border: 1px solid var(--p-shopline-blue-border); }
.dashboard-drawer-title-wrap h3 { margin: 0; color: var(--p-text); font-size: 15px; }
.dashboard-drawer-title-wrap p { margin: 4px 0 0; color: var(--p-text-muted); font-size: 11px; line-height: 1.4; }
.dashboard-icon-button { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 8px; background: transparent; color: var(--p-icon); cursor: pointer; }
.dashboard-icon-button:hover { background: var(--p-bg-fill); color: var(--p-text); }
.dashboard-drawer-body { overflow: auto; padding: 18px; }
.dashboard-drawer-footer { padding: 14px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--p-border-subdued); }
.detail-hero { padding: 17px; border: 1px solid var(--p-border-subdued); border-radius: 12px; background: var(--p-bg-surface-secondary); }
.detail-hero > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.detail-hero > strong { display: block; margin-top: 17px; color: var(--p-critical); font-size: 27px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
.detail-hero > p { margin: 8px 0 0; color: var(--p-text-muted); font-size: 11px; }
.detail-section { padding: 18px 0; border-bottom: 1px solid var(--p-border-subdued); }
.detail-section:last-child { border-bottom: 0; }
.detail-section h4 { margin: 0 0 12px; color: var(--p-text); font-size: 12px; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.detail-grid > div { padding: 11px; border: 1px solid var(--p-border-subdued); border-radius: 9px; background: var(--p-bg-surface-secondary); }
.detail-grid > div.total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: var(--p-shopline-blue-soft); border-color: var(--p-shopline-blue-border); }
.detail-grid dt, .detail-list dt { color: var(--p-text-muted); font-size: 10px; }
.detail-grid dd { margin: 5px 0 0; color: var(--p-text); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list > div { min-height: 38px; padding: 8px 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; border-bottom: 1px dashed var(--p-border-subdued); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dd { margin: 0; color: var(--p-text); font-size: 11px; word-break: break-word; }
.detail-copy { margin: 0; padding: 12px; border-radius: 9px; background: var(--p-bg-surface-secondary); color: var(--p-text-subdued); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.task-center-drawer { width: min(430px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.task-center-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: var(--p-text-muted); }
.task-center-empty > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--p-primary); background: var(--p-shopline-blue-soft); font-size: 20px; }
.task-center-empty strong { color: var(--p-text); font-size: 14px; }
.task-center-empty p { max-width: 260px; margin: 0; font-size: 11px; line-height: 1.6; }
.task-center-body .export-task-card { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 16px; }
.task-center-body .export-task-actions { grid-column: 1 / -1; justify-content: flex-end; }

.dashboard-small-modal { width: min(420px, 100%); }
.dashboard-modal-field { display: grid; gap: 7px; margin-top: 18px; color: var(--p-text); font-size: 12px; font-weight: 650; }
.dashboard-form-error { min-height: 18px; margin: 6px 0 0; color: var(--p-critical); font-size: 11px; }

@keyframes dashboardDrawerIn { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 1280px) {
    .dashboard-filter-grid { grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr)); }
    .dashboard-search-field { grid-column: span 2; }
    .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-kpi-card:last-of-type { grid-column: 1 / -1; }
    .dashboard-analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .dashboard-page { padding: 18px 16px 28px; }
    .dashboard-page-header { flex-direction: column; }
    .dashboard-header-actions { justify-content: flex-start; max-width: none; width: 100%; }
    .dashboard-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-search-field { grid-column: 1 / -1; }
    .dashboard-filter-footer { flex-direction: column; }
    .dashboard-active-filters { justify-content: flex-start; }
    .dashboard-table-toolbar { align-items: stretch; flex-direction: column; }
    .dashboard-table-actions { justify-content: flex-start; }
}

@media (max-width: 680px) {
    .dashboard-page { padding: 14px 10px 24px; gap: 12px; }
    .dashboard-title-row h1 { font-size: 24px; }
    .dashboard-header-actions .language-select-wrap,
    .dashboard-header-actions .btn { flex: 1 1 auto; }
    .dashboard-header-actions #exportBtn { flex: 1 1 100%; }
    .dashboard-view-bar { align-items: stretch; flex-direction: column; }
    .dashboard-save-view-button { justify-content: center; }
    .dashboard-filter-surface { padding: 14px; }
    .dashboard-filter-grid { grid-template-columns: 1fr; }
    .dashboard-search-field { grid-column: auto; }
    .dashboard-kpi-grid { grid-template-columns: 1fr; }
    .dashboard-kpi-card { min-height: 120px; }
    .dashboard-kpi-card:last-of-type { grid-column: auto; }
    .dashboard-panel-header { flex-direction: column; }
    .dashboard-chart-controls { justify-content: flex-start; width: 100%; }
    .dashboard-trend-chart { min-height: 220px; overflow-x: auto; }
    .dashboard-trend-chart svg { min-width: 680px; }
    .dashboard-table-wrap { display: none !important; }
    .dashboard-mobile-list.active { display: grid; gap: 9px; padding: 10px; }
    .dashboard-mobile-card {
        width: 100%;
        padding: 13px;
        display: grid;
        gap: 9px;
        border: 1px solid var(--p-border-subdued);
        border-radius: 11px;
        background: var(--p-bg-surface);
        color: var(--p-text);
        text-align: left;
        font: inherit;
        cursor: pointer;
    }
    .dashboard-mobile-card:hover { border-color: var(--p-shopline-blue-border); background: var(--p-bg-surface-tertiary); }
    .dashboard-mobile-card-head, .dashboard-mobile-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .dashboard-mobile-card-head strong { font-size: 13px; }
    .dashboard-mobile-amount { color: var(--p-critical); font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
    .dashboard-mobile-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--p-text-subdued); font-size: 11px; }
    .dashboard-mobile-card-foot { padding-top: 8px; border-top: 1px solid var(--p-border-subdued); color: var(--p-text-muted); font-size: 11px; }
    .dashboard-table-actions { display: grid; grid-template-columns: auto 1fr; }
    .dashboard-table-actions > .btn:last-child { grid-column: 1 / -1; }
    .dashboard-table-meta { align-items: flex-start; flex-direction: column; }
    .dashboard-drawer { width: 100%; }
    .dashboard-drawer-footer { align-items: stretch; flex-direction: column; }
    .dashboard-drawer-footer .btn { width: 100%; }
    .dashboard-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-drawer, .dashboard-drawer-backdrop { animation: none !important; }
}

/* Dashboard v2 visibility and KPI refinements */
.dashboard-task-badge[hidden],
.dashboard-chart-legend [hidden],
.dashboard-kpi-card [hidden],
.task-center-empty[hidden] { display: none !important; }
.dashboard-kpi-currency-foot .currency-summary.compact {
    display: grid;
    gap: 2px;
    margin-top: 8px;
}
.dashboard-kpi-currency-foot .currency-summary.compact .currency-summary-line {
    min-height: 19px;
    font-size: 10px;
}
.dashboard-kpi-currency-foot {
    align-items: flex-end;
    margin-top: 7px;
}

/* Dashboard language picker v2.0.2
   Replaces the browser-native select so the control renders consistently
   in embedded admin browsers, Safari, Chrome and dark mode. */
.dashboard-language-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    min-height: 36px;
    z-index: 360;
}

.dashboard-header-actions .dashboard-language-button {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 122px;
    max-width: 166px;
    margin: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid var(--p-border-strong);
    border-radius: var(--p-radius-200);
    background: var(--p-bg-surface);
    color: var(--p-text);
    box-shadow: var(--p-shadow-xs);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}

.dashboard-header-actions .dashboard-language-button:hover {
    background: var(--p-bg-surface-hover);
    border-color: var(--p-border-strong);
}

.dashboard-header-actions .dashboard-language-button:focus-visible,
.dashboard-language-picker.open .dashboard-language-button {
    outline: none;
    border-color: var(--p-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-focus) 22%, transparent);
}

.dashboard-language-globe {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: var(--p-icon);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-language-current {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dashboard-language-chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    stroke: var(--p-icon-subdued);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}

.dashboard-language-picker.open .dashboard-language-chevron {
    transform: rotate(180deg);
}

.dashboard-language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    padding: 6px;
    border: 1px solid var(--p-border-subdued);
    border-radius: 10px;
    background: var(--p-bg-surface);
    box-shadow: var(--p-shadow-popover);
    transform-origin: top right;
    animation: dashboard-language-menu-in .12s ease-out;
}

.dashboard-language-menu[hidden] {
    display: none !important;
}

@keyframes dashboard-language-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dashboard-language-option {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--p-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.dashboard-language-option:hover,
.dashboard-language-option:focus-visible {
    outline: none;
    background: var(--p-bg-surface-hover);
}

.dashboard-language-option.selected {
    background: var(--p-shopline-blue-soft);
    color: var(--p-primary-active);
}

.dashboard-language-code {
    width: 28px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--p-border-subdued);
    border-radius: 6px;
    background: var(--p-bg-surface-secondary);
    color: var(--p-text-subdued);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}

.dashboard-language-option.selected .dashboard-language-code {
    border-color: var(--p-shopline-blue-border);
    background: var(--p-bg-surface);
    color: var(--p-primary);
}

.dashboard-language-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-language-check {
    width: 16px;
    height: 16px;
    stroke: var(--p-primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.dashboard-language-option.selected .dashboard-language-check {
    opacity: 1;
}

@media (max-width: 900px) {
    .dashboard-language-menu {
        right: auto;
        left: 0;
        transform-origin: top left;
    }
}

@media (max-width: 680px) {
    .dashboard-language-picker {
        flex: 1 1 auto;
        min-width: 132px;
    }

    .dashboard-header-actions .dashboard-language-button {
        width: 100%;
        max-width: none;
    }

    .dashboard-language-menu {
        width: min(240px, calc(100vw - 20px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-language-menu { animation: none; }
    .dashboard-language-chevron { transition: none; }
}


/* ================================================================
   v2.1.3 — Stable wide-table viewport
   Keep optional columns inside the table panel instead of expanding the page.
   ================================================================ */
.dashboard-page {
    min-width: 0;
    max-width: 100%;
}
.dashboard-table-panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    isolation: isolate;
}
.dashboard-table-toolbar,
.dashboard-table-meta,
.dashboard-table-panel .table-pagination {
    min-width: 0;
    max-width: 100%;
}
.dashboard-table-meta-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dashboard-table-scroll-hint {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--p-primary);
    font-size: 10px;
    line-height: 1.35;
}
.dashboard-table-scroll-hint[hidden] { display: none !important; }
.dashboard-table-scroll-hint i { flex: 0 0 auto; }
.dashboard-column-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--p-bg-fill);
    color: var(--p-text-subdued);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dashboard-column-popover {
    width: min(310px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard-column-popover[hidden] { display: none !important; }
.dashboard-column-popover-head {
    flex: 0 0 auto;
    gap: 10px;
    border-bottom: 1px solid var(--p-border-subdued);
}
.dashboard-column-popover-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.dashboard-column-visible-count {
    color: var(--p-text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.dashboard-column-preset-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dashboard-column-preset-actions button {
    white-space: nowrap;
}
#columnSettingsList {
    min-height: 0;
    overflow-y: auto;
    padding: 6px 0;
}
.dashboard-column-popover-note {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 9px 8px 7px;
    border-top: 1px solid var(--p-border-subdued);
    color: var(--p-text-muted);
    font-size: 10px;
    line-height: 1.45;
}
.dashboard-column-popover-note i {
    margin-top: 2px;
    color: var(--p-primary);
}
.dashboard-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -14px 0 14px -16px color-mix(in srgb, var(--p-text) 28%, transparent);
}
.dashboard-table-wrap table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: fixed;
}
.dashboard-table-wrap .dashboard-column-head,
.dashboard-table-wrap .dashboard-column-cell {
    box-sizing: border-box;
}
.dashboard-table-wrap th.dashboard-column-order,
.dashboard-table-wrap td.dashboard-column-order { width: 150px; min-width: 150px; max-width: 150px; }
.dashboard-table-wrap th.dashboard-column-refundDate,
.dashboard-table-wrap td.dashboard-column-refundDate { width: 116px; min-width: 116px; max-width: 116px; }
.dashboard-table-wrap th.dashboard-column-status,
.dashboard-table-wrap td.dashboard-column-status { width: 84px; min-width: 84px; max-width: 84px; }
.dashboard-table-wrap th.dashboard-column-type,
.dashboard-table-wrap td.dashboard-column-type { width: 104px; min-width: 104px; max-width: 104px; }
.dashboard-table-wrap th.dashboard-column-amount,
.dashboard-table-wrap td.dashboard-column-amount { width: 138px; min-width: 138px; max-width: 138px; }
.dashboard-table-wrap th.dashboard-column-ratio,
.dashboard-table-wrap td.dashboard-column-ratio { width: 84px; min-width: 84px; max-width: 84px; }
.dashboard-table-wrap th.dashboard-column-shipping,
.dashboard-table-wrap td.dashboard-column-shipping { width: 96px; min-width: 96px; max-width: 96px; }
.dashboard-table-wrap th.dashboard-column-items,
.dashboard-table-wrap td.dashboard-column-items { width: 154px; min-width: 154px; max-width: 154px; }
.dashboard-table-wrap th.dashboard-column-refundId,
.dashboard-table-wrap td.dashboard-column-refundId { width: 184px; min-width: 184px; max-width: 184px; }
.dashboard-table-wrap th.dashboard-column-orderDate,
.dashboard-table-wrap td.dashboard-column-orderDate { width: 116px; min-width: 116px; max-width: 116px; }
.dashboard-table-wrap th.dashboard-column-orderAmount,
.dashboard-table-wrap td.dashboard-column-orderAmount { width: 142px; min-width: 142px; max-width: 142px; }
.dashboard-table-wrap th.dashboard-column-breakdown,
.dashboard-table-wrap td.dashboard-column-breakdown { width: 190px; min-width: 190px; max-width: 190px; }
.dashboard-table-wrap th.dashboard-column-note,
.dashboard-table-wrap td.dashboard-column-note { width: 220px; min-width: 220px; max-width: 220px; }
.dashboard-table-wrap th.dashboard-column-action,
.dashboard-table-wrap td.dashboard-column-action { width: 104px; min-width: 104px; max-width: 104px; }
.dashboard-refund-id {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Keep the order identity and row action available while scrolling wide tables. */
.dashboard-table-wrap th.dashboard-column-order,
.dashboard-table-wrap td.dashboard-column-order {
    position: sticky;
    left: 0;
}
.dashboard-table-wrap th.dashboard-column-action,
.dashboard-table-wrap td.dashboard-column-action {
    position: sticky;
    right: 0;
}
.dashboard-table-wrap th.dashboard-column-order,
.dashboard-table-wrap th.dashboard-column-action {
    z-index: 5;
    background: var(--p-bg-surface-secondary);
}
.dashboard-table-wrap td.dashboard-column-order,
.dashboard-table-wrap td.dashboard-column-action {
    z-index: 2;
    background: var(--p-bg-surface);
}
.dashboard-table-wrap th.dashboard-column-order,
.dashboard-table-wrap td.dashboard-column-order {
    box-shadow: 10px 0 12px -14px color-mix(in srgb, var(--p-text) 45%, transparent);
}
.dashboard-table-wrap th.dashboard-column-action,
.dashboard-table-wrap td.dashboard-column-action {
    box-shadow: -10px 0 12px -14px color-mix(in srgb, var(--p-text) 45%, transparent);
}
.dashboard-table-wrap tbody tr:hover td.dashboard-column-order,
.dashboard-table-wrap tbody tr:hover td.dashboard-column-action {
    background: var(--p-bg-surface-hover);
}
.dashboard-table-wrap .dashboard-action-cell {
    text-align: center;
}
.dashboard-table-wrap .dashboard-row-action {
    width: 100%;
    justify-content: center;
    padding-inline: 6px;
}
@media (max-width: 900px) {
    .dashboard-table-meta-left { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ================================================================
   v2.1.4 — Fixed table geometry and bounded long-field previews
   Explicit table width is calculated from visible columns. Long IDs,
   notes, item names and breakdown text cannot influence page width.
   ================================================================ */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
.dashboard-page {
    min-width: 0;
    max-width: min(100%, var(--dashboard-max-width));
    overflow-x: clip;
}
.dashboard-table-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    contain: inline-size;
}
.dashboard-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    contain: inline-size layout paint;
}
.dashboard-table-wrap table {
    width: max(100%, var(--dashboard-table-content-width, 1120px));
    min-width: max(100%, var(--dashboard-table-content-width, 1120px));
    max-width: max(100%, var(--dashboard-table-content-width, 1120px));
    table-layout: fixed;
}
.dashboard-table-wrap col {
    min-width: 0;
    max-width: none;
}
.dashboard-table-wrap .dashboard-column-head,
.dashboard-table-wrap .dashboard-column-cell {
    min-width: 0 !important;
    overflow: hidden;
}
.dashboard-table-wrap .dashboard-column-cell > * {
    min-width: 0;
    max-width: 100%;
}
.dashboard-cell-clip {
    display: block !important;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    overflow-wrap: normal;
}
.dashboard-refund-id {
    direction: ltr;
    unicode-bidi: plaintext;
    letter-spacing: -0.01em;
}
.dashboard-table-wrap .items-preview,
.dashboard-table-wrap .note-preview {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    line-height: 1.4;
}
.dashboard-breakdown-clip,
.dashboard-breakdown-clip .refund-detail-lines {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.dashboard-breakdown-clip .refund-detail-line {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-table-wrap td.dashboard-column-refundId,
.dashboard-table-wrap th.dashboard-column-refundId { width: 156px; min-width: 156px; max-width: 156px; }
.dashboard-table-wrap td.dashboard-column-breakdown,
.dashboard-table-wrap th.dashboard-column-breakdown { width: 170px; min-width: 170px; max-width: 170px; }
.dashboard-table-wrap td.dashboard-column-note,
.dashboard-table-wrap th.dashboard-column-note { width: 180px; min-width: 180px; max-width: 180px; }


/* ================================================================
   v2.1.5 — Column editor popover visibility and viewport placement
   The table panel remains width-contained, while the Edit columns
   popover may paint outside the card and scroll within the viewport.
   ================================================================ */
.dashboard-table-panel {
    overflow: visible;
    contain: inline-size;
}
.dashboard-table-panel.column-popover-open {
    position: relative;
    z-index: 120;
}
.dashboard-table-toolbar,
.dashboard-table-actions,
.dashboard-popover-wrap {
    overflow: visible;
}
.dashboard-column-popover {
    max-height: var(--dashboard-column-popover-max-height, min(520px, calc(100vh - 32px)));
    overscroll-behavior: contain;
}
.dashboard-column-popover.opens-upward {
    top: auto;
    bottom: calc(100% + 7px);
}
#columnSettingsList {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}


/* Export history center v2.2.1 — split task/file retention */
.task-center-legacy-card { display: none !important; }
.task-center-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--p-border); }
.task-center-toolbar strong { display: block; font-size: 13px; color: var(--p-text); }
.task-center-toolbar p { margin: 4px 0 0; color: var(--p-text-muted); font-size: 11px; line-height: 1.55; }
.task-history-list { display: grid; gap: 10px; margin-top: 14px; }
.task-history-loading { min-height: 140px; display: grid; place-items: center; color: var(--p-primary); font-size: 22px; }
.task-history-card { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: start; gap: 11px; padding: 13px; border: 1px solid var(--p-border); border-radius: 10px; background: var(--p-surface); }
.task-history-card.processing { border-color: var(--p-primary-border); background: var(--p-shopline-blue-soft); }
.task-history-card.failed { border-color: var(--p-critical-border); background: var(--p-critical-bg); }
.task-history-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--p-primary); background: var(--p-shopline-blue-soft); }
.task-history-card.success .task-history-icon { color: var(--p-success); background: var(--p-success-bg); }
.task-history-card.failed .task-history-icon { color: var(--p-critical); background: var(--p-critical-bg); }
.task-history-main { min-width: 0; }
.task-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-history-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--p-text); }
.task-history-status { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--p-neutral-bg); color: var(--p-text-muted); font-size: 10px; font-weight: 700; }
.task-history-status.success { color: var(--p-success); background: var(--p-success-bg); }
.task-history-status.failed { color: var(--p-critical); background: var(--p-critical-bg); }
.task-history-status.processing, .task-history-status.queued { color: var(--p-primary); background: var(--p-shopline-blue-soft); }
.task-history-meta, .task-history-foot { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--p-text-muted); font-size: 10px; line-height: 1.5; }
.task-history-meta { margin-top: 6px; }
.task-history-foot { margin-top: 7px; }
.task-history-error { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 0; color: var(--p-critical); font-size: 10px; line-height: 1.45; }
.task-history-actions { align-self: center; }
.task-history-download { min-height: 30px; padding: 5px 9px; font-size: 10px; }
.task-history-expired { display: inline-flex; align-items: center; min-height: 28px; color: var(--p-text-muted); font-size: 10px; white-space: nowrap; }
.task-history-load-more { width: 100%; margin-top: 12px; }
@media (max-width: 560px) {
  .task-history-card { grid-template-columns: 32px minmax(0,1fr); }
  .task-history-actions { grid-column: 1 / -1; }
  .task-history-download { width: 100%; justify-content: center; }
}