* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: Inter, Arial, sans-serif;
    background: radial-gradient(circle at top, #101f56 0%, #07112f 35%, #040919 100%);
    color: #eef2ff;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

:root {
    --panel: rgba(11, 22, 63, 0.9);
    --panel-soft: rgba(20, 33, 82, 0.92);
    --line: rgba(162, 180, 255, 0.14);
    --text-soft: #aeb8dc;
    --primary: linear-gradient(135deg, #8d46ff, #a83bff 45%, #6e32ff);
    --danger: #ef5b78;
    --success-bg: rgba(21, 125, 76, 0.28);
    --warning-bg: rgba(191, 148, 22, 0.28);
    --danger-bg: rgba(191, 46, 69, 0.24);
    --info-bg: rgba(58, 114, 255, 0.22);
}

.site-shell, .site-home {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}
.home-card, .login-card {
    width: min(100%, 560px);
    background: rgba(8, 14, 39, 0.86);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    backdrop-filter: blur(14px);
}
.home-card, .login-card {
    display: grid;
    gap: 24px;
}
.auth-card-compact {
    width: min(100%, 520px);
}
.home-logo, .auth-logo {
    width: min(100%, 420px);
    max-height: 36vh;
    object-fit: contain;
    margin: 0 auto;
}
.auth-copy {
    text-align: center;
}
.social-link-text {
    min-width: 140px;
    height: 56px;
    padding: 0 16px;
    gap: 10px;
}
.social-icon {
    font-size: 1.05rem;
}
.btn-block {
    width: 100%;
}
.auth-shell {
    width: 100%;
}

.home-card-minimal {
    width: min(100%, 560px);
    padding: 44px 36px 34px;
    gap: 30px;
}
.home-logo { width: min(100%, 460px); margin: 0 auto; }
.social-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.social-links-icons { gap: 18px; }
.social-link, .btn {
    border-radius: 16px;
    border: 1px solid var(--line);
    transition: 0.2s ease;
}
.social-link {
    min-width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
}
.social-link-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}
.social-link-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 58%);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.social-link-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
    z-index: 1;
}
.social-link:hover, .btn:hover { transform: translateY(-1px); }
.social-link-icon:hover {
    background: rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.social-link-icon:hover::before { opacity: 1; }
.social-link-instagram:hover {
    border-color: rgba(221,42,123,0.35);
    box-shadow: 0 12px 28px rgba(221,42,123,0.12);
}
.social-link-facebook:hover {
    border-color: rgba(24,119,242,0.36);
    box-shadow: 0 12px 28px rgba(24,119,242,0.12);
}
.social-link-tiktok:hover {
    border-color: rgba(254,44,85,0.28);
    box-shadow: 0 12px 28px rgba(37,244,238,0.1), 0 12px 28px rgba(254,44,85,0.08);
}
.home-backoffice-link {
    position: fixed;
    right: 14px;
    bottom: 12px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.home-backoffice-link:hover { color: rgba(255,255,255,0.82); }
.home-login-mobile { display: none; }

.login-card h1, .home-card h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3rem); }
.login-card p, .muted { color: var(--text-soft); }
.login-form, .form-grid, .filters-grid { display: grid; gap: 16px; }
label span { display: block; margin: 0 0 8px; color: #d7def6; font-size: 0.95rem; }
input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05);
    color: #fff;
    outline: none;
}
textarea { resize: vertical; min-height: 110px; }
input::placeholder, textarea::placeholder { color: #97a5d5; }
select option { color: #111; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    color: white;
    background: rgba(255,255,255,0.07);
}
.btn-primary { background: var(--primary); border-color: transparent; }
.btn-secondary { background: rgba(255,255,255,0.09); }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(239, 91, 120, 0.18); border-color: rgba(239, 91, 120, 0.35); }
.btn-small { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 0.95rem; }

.admin-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    min-height: 100vh;
    padding: 16px;
}
.admin-aside {
    position: sticky;
    top: 16px;
    align-self: start;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 220px;
}
.sidebar {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0,0,0,0.26);
}
.admin-brand-global {
    padding: 0 0 2px;
    display: grid;
    justify-items: start;
}
.admin-brand-global img {
    width: 182px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.sidebar {
    overflow: hidden;
    position: static;
    min-height: auto;
    border-radius: 28px;
    padding: 14px;
}
.sidebar-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 8px; }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #dde4ff;
    font-size: 0.98rem;
}
.nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b9c7ff;
    opacity: 0.96;
    flex: 0 0 18px;
}
.nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.sidebar-nav a.active, .sidebar-nav a:hover { background: rgba(118, 64, 255, 0.22); }
.sidebar-nav a.active .nav-icon, .sidebar-nav a:hover .nav-icon { color: #ffffff; }
.mobile-menu-toggle, .mobile-menu-close, .mobile-backdrop { display: none; }
.mobile-menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 50;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(8, 14, 39, 0.94);
    padding: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2.5px;
    margin: 0;
    background: #ffffff;
    border-radius: 999px;
}
.mobile-menu-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 1.4rem;
}
.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 39;
}

.admin-main { min-width: 0; padding: 2px 0 20px; }
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}
.page-head h1 { margin: 2px 0 6px; font-size: clamp(1.7rem, 2.6vw, 2.45rem); }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow { margin: 0; color: #c9b7ff; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; }

.panel, .stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.panel { padding: 16px; }
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.panel-head h2, .empty-state h2, .form-section h2 { margin: 0 0 4px; font-size: 1.2rem; }
.stats-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}
.stats-grid-dashboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid-orders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card {
    padding: 13px 15px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
}
.stat-card span { color: var(--text-soft); display: block; margin-bottom: 6px; font-size: 0.86rem; line-height: 1.25; text-align: left; }
.stat-card strong {
    font-size: clamp(1.28rem, 1.9vw, 1.8rem);
    line-height: 1.05;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.stat-card-compact strong { font-size: clamp(1.4rem, 2.5vw, 2rem); }


@media (min-width: 1181px) {
    .mobile-menu-close {
        display: none !important;
    }
}


.alert {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(239, 91, 120, 0.35);
    background: rgba(239, 91, 120, 0.12);
    margin-bottom: 20px;
}
.alert-error { color: #ffdbe4; }
.text-alert { color: #ffafc0; font-weight: 600; }

.filters-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
.filters-grid-expenses { grid-template-columns: 2fr 1fr auto; }
.filter-actions { display: flex; gap: 10px; align-self: end; flex-wrap: wrap; }

.dashboard-stack { display: grid; gap: 22px; }
.compact-list { display: grid; gap: 14px; }
.compact-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}
.compact-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    cursor: pointer;
}
.compact-item summary::-webkit-details-marker { display: none; }
.compact-item-main { min-width: 0; }
.compact-item-main strong { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.compact-item-main span { display: block; color: var(--text-soft); font-size: 0.88rem; margin-bottom: 5px; }
.compact-item-main p {
    margin: 0;
    color: #eef2ff;
    font-size: 0.94rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compact-item-side { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 40%; }
.compact-item-side-static { align-items: center; }
.compact-item-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 14px;
}
.compact-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; padding-top: 14px; color: var(--text-soft); font-size: 0.95rem; }
.compact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.compact-item-static { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 18px; }
.compact-empty { padding-top: 4px; }

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    white-space: nowrap;
}
.badge-pending, .badge-unpaid { background: var(--danger-bg); color: #ffd8de; }
.badge-in_progress, .badge-partial, .badge-sent { background: var(--warning-bg); color: #fff0b6; }
.badge-packed { background: rgba(124, 92, 255, 0.18); color: #e4dcff; }
.badge-completed, .badge-paid, .badge-delivered { background: var(--success-bg); color: #d4ffe7; }
.badge-hand, .badge-shipping, .badge-vinted, .badge-neutral { background: var(--info-bg); color: #d9e5ff; }
.badge-parts-none { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.badge-parts-progress { background: rgba(245, 158, 11, 0.16); color: #fde68a; }
.badge-parts-done { background: rgba(45, 212, 191, 0.16); color: #99f6e4; }
.badge-overdue { background: var(--danger-bg); color: #ffd8de; }

.empty-state { padding: 10px 2px; }
.empty-state p { margin: 0; color: var(--text-soft); }
.form-panel { display: grid; gap: 22px; }
.form-section { border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: rgba(255,255,255,0.02); margin-bottom: 18px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-full { grid-column: 1 / -1; }
.form-footer { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1180px) {
    .stats-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-aside {
        position: static;
        display: block;
        max-width: 100%;
    }
    .admin-brand-global {
        width: 100%;
        max-width: 180px;
        margin: 0 0 10px;
        padding: 0;
    }
    .admin-brand-global img { width: 150px; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: min(280px, calc(100vw - 28px));
        height: 100vh;
        min-height: 100vh;
        border-radius: 0 24px 24px 0;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        padding-top: 18px;
    }
    .mobile-menu-toggle, .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open .mobile-backdrop { display: block; }
    .admin-main { padding-top: 0; }
}

@media (max-width: 760px) {
    .site-shell, .site-home { padding: 16px; }
    .home-card, .login-card { padding: 20px; border-radius: 22px; }
    .admin-layout { padding: 16px; gap: 14px; }
    .admin-brand-global {
        max-width: 150px;
        margin: 8px auto 10px;
        padding: 0;
        justify-items: center;
    }
    .admin-brand-global img { width: 112px; }
    .page-head { flex-direction: column; }
    .page-head h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
    .page-head-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-head-actions .btn { width: 100%; min-width: 0; padding: 0 12px; }
    .page-head > .btn { width: 100%; }
    .stats-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stats-grid-orders, .filters-grid, .filters-grid-expenses, .form-grid-2 { grid-template-columns: 1fr; }
    .panel, .stat-card, .sidebar { border-radius: 22px; }
    .panel { padding: 16px; }
    .stat-card {
        padding: 12px 12px 14px;
        min-height: 96px;
        border-radius: 18px;
    }
    .stat-card span {
        font-size: 0.88rem;
        margin-bottom: 8px;
        line-height: 1.25;
    }
    .stat-card strong {
        font-size: clamp(1.28rem, 6vw, 1.72rem);
        line-height: 1.05;
    }
    .eyebrow { font-size: 0.76rem; }
    .muted { font-size: 0.98rem; }
    .compact-item summary { flex-direction: column; padding: 14px 16px; }
    .compact-item-body { padding: 0 16px 16px; }
    .compact-item-side { max-width: 100%; justify-content: flex-start; }
    .compact-item-main strong { font-size: 0.96rem; }
    .compact-item-main span, .compact-item-main p, .compact-meta { font-size: 0.88rem; }
    .compact-item-main p { white-space: normal; }
    .compact-item-static { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
    .filter-actions, .form-footer, .compact-actions { width: 100%; }
    .filter-actions .btn, .form-footer .btn, .compact-actions .btn { flex: 1 1 100%; }
}


.alert-success {
    color: #d4ffe7;
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(22, 163, 74, 0.32);
}
.order-form-mobile-ready {
    gap: 18px;
}
.order-quick-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.order-quick-pill {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
}
.order-quick-pill span {
    display: block;
    color: var(--text-soft);
    font-size: 0.84rem;
    margin-bottom: 6px;
}
.order-quick-pill strong {
    font-size: 1.05rem;
}
.form-section-collapsible {
    gap: 0;
    padding: 0;
    overflow: visible;
}
.form-section-collapsible summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}
.form-section-collapsible summary::-webkit-details-marker {
    display: none;
}
.form-section-collapsible summary p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.form-section-collapsible .form-section-body {
    padding: 0 20px 22px;
}
.section-toggle {
    font-size: 0.8rem;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.form-section-collapsible[open] .section-toggle::after {
    content: ' ▲';
    font-size: 0.7rem;
}
.form-section-collapsible:not([open]) .section-toggle::after {
    content: ' ▼';
    font-size: 0.7rem;
}
.form-footer-sticky {
    position: sticky;
    bottom: 12px;
    padding-top: 4px;
}
.form-footer-sticky .btn {
    min-height: 52px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}
.is-hidden {
    display: none !important;
}

@media (max-width: 760px) {
    .order-form-mobile-ready {
        padding-left: 12px;
        padding-right: 12px;
    }
    .order-quick-bar {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .form-section-collapsible summary {
        padding: 16px;
    }
    .form-section-collapsible .form-section-body {
        padding: 0 16px 16px;
    }
    .form-section-collapsible h2 {
        font-size: 1.08rem;
        margin: 0;
    }
    .form-section-collapsible summary p {
        font-size: 0.84rem;
    }
    .form-footer-sticky {
        bottom: 8px;
    }
}

@media (min-width: 981px) {
    .form-section-collapsible[open] summary {
        cursor: default;
    }
    .section-toggle {
        display: none;
    }
}


@media (max-width: 640px) {
    .site-shell, .site-home { padding: 16px; }
    .home-card, .login-card { padding: 18px 16px; border-radius: 22px; gap: 16px; }
    .home-logo, .auth-logo {
        width: min(100%, 240px);
        max-height: 18vh;
        filter: drop-shadow(0 8px 24px rgba(0,0,0,0.24));
    }
    .auth-card-compact { width: min(100%, 420px); }
    .auth-copy h1 { font-size: 1.8rem; margin-bottom: 6px; }
    .auth-copy p { font-size: 0.95rem; }
    .login-form { gap: 12px; }
    .login-form label span { font-size: 0.88rem; margin-bottom: 6px; }
    .login-form input { padding: 12px 14px; }
    .social-links { gap: 10px; }
    .social-link-text { min-width: calc(50% - 6px); padding: 0 12px; font-size: 0.92rem; height: 52px; }
    .home-backoffice-link {
        display: block;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
        z-index: 20;
    }
    .home-login-mobile {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
    }
}
@media (max-width: 520px) {
    .stats-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head-actions .btn { min-height: 46px; }
}
@media (min-width: 560px) and (max-width: 760px) {
    .stats-grid-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
    .sidebar-open .mobile-menu-toggle { opacity: 0; pointer-events: none; }
    .sidebar-head { padding-top: 6px; }
}

@media (min-width: 1181px) {
    .sidebar-nav a { font-size: 0.95rem; }
    .muted { font-size: 0.98rem; }
    .page-head-actions .btn { min-height: 44px; padding: 0 16px; }
    .compact-item summary { padding: 14px 16px; }
    .compact-item-body { padding: 0 16px 16px; }
    .badge { padding: 7px 10px; font-size: 0.85rem; }
}

@media (max-width: 760px) {
    .mobile-menu-toggle { width: 46px; height: 46px; }
    .mobile-menu-toggle span { width: 18px; height: 2.5px; }
    .sidebar-head { align-items: flex-start; }
    .page-head { gap: 14px; }
    .stats-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { min-height: 94px; padding: 12px 12px 14px; }
    .stat-card span { font-size: 0.82rem; margin-bottom: 6px; }
    .stat-card strong { font-size: clamp(1.32rem, 6vw, 1.78rem); }
}

@media (max-width: 480px) {
    .admin-brand-global {
        max-width: 136px;
        margin-bottom: 6px;
    }
    .admin-brand-global img { width: 102px; }
}

@media (max-width: 760px) {
    .mobile-menu-toggle { top: 14px; left: 14px; }
    .admin-main { padding-top: 0; }
}


.filters-grid-products { grid-template-columns: 2fr 1fr auto; }
.product-notes {
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.55;
    padding-top: 2px;
}
.order-quick-bar-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
}
.checkbox-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #8d46ff;
}
.checkbox-row span {
    margin: 0;
}
@media (max-width: 760px) {
    .filters-grid-products { grid-template-columns: 1fr; }
    .checkbox-row {
        align-items: flex-start;
    }
}


.filters-grid-products { grid-template-columns: 2fr 1fr auto; }
.filters-grid-stock { grid-template-columns: 2fr 1.2fr 1fr auto; }
.compact-meta-inline { padding-top: 0; justify-content: flex-end; }
.product-notes { color: #eef2ff; line-height: 1.5; }

@media (max-width: 1180px) {
    .filters-grid-products, .filters-grid-stock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .filters-grid-products, .filters-grid-stock { grid-template-columns: 1fr; }
    .compact-meta-inline { justify-content: flex-start; }
}

.product-link-box {
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(99, 102, 241, 0.04);
}

.section-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.checkbox-field-spacious {
    min-height: 52px;
}

.receipt-hint {
    margin: 12px 0 0;
    font-size: 0.92rem;
}

.compact-meta-stack {
    display: grid;
    gap: 8px;
}

.order-quick-bar-materials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.materials-box {
    display: grid;
    gap: 16px;
}

.materials-list {
    display: grid;
    gap: 16px;
}

.material-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(120px, 0.46fr) minmax(140px, 0.52fr) minmax(140px, 0.56fr) minmax(140px, 0.56fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
}

.material-row-grid {
    display: contents;
}

.material-remove {
    justify-self: end;
    align-self: center;
}
.material-remove-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.08);
    color: #ff6b7a;
    font-size: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.material-remove-icon:hover {
    background: rgba(127, 29, 29, 0.16);
    border-color: rgba(248, 113, 113, 0.42);
}
.material-remove-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.materials-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.materials-hint {
    margin: 0;
}

.materials-view-list {
    display: grid;
    gap: 12px;
}

.materials-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
}

.materials-view-item p,
.materials-view-side small {
    margin: 4px 0 0;
    color: var(--text-soft);
}

.materials-view-side {
    text-align: right;
}

@media (max-width: 1400px) {
    .material-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .material-row-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .material-remove {
        justify-self: end;
    }
}

@media (max-width: 760px) {
    .order-quick-bar-materials {
        grid-template-columns: 1fr;
    }

    .materials-actions,
    .materials-view-item {
        align-items: stretch;
        flex-direction: column;
    }

    .material-remove,
    .materials-view-side {
        justify-self: stretch;
        text-align: left;
    }
}


.product-color-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    align-items: end;
}
.product-color-picker-field {
    min-width: 0;
}
.product-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(12, 19, 42, 0.72);
}
.product-color-picker {
    width: 56px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.product-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}
.product-color-picker::-webkit-color-swatch {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
}
.product-color-picker::-moz-color-swatch {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
}
.product-color-hex {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #eef2ff;
}
.product-color-line {
    display: block;
}
.product-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.product-color-swatch-input {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: none;
    flex: 0 0 18px;
}
.product-color-swatch-input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.product-color-swatch-input::-webkit-color-swatch {
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
}
.product-color-swatch-input::-moz-color-swatch {
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
}
@media (max-width: 720px) {
    .product-color-row {
        grid-template-columns: 1fr;
    }
}




.select-native-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.product-dropdown {
    position: relative;
    z-index: 60;
}
.product-dropdown-button {
    width: 100%;
    min-height: 50px;
    padding: 8px 12px;
    border-radius: 18px;
    border: 1px solid rgba(162, 180, 255, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    color: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.product-dropdown-button:hover {
    border-color: rgba(162, 180, 255, 0.3);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}
.product-dropdown-button[data-product-dropdown-button],
.product-dropdown-option[data-product-dropdown-option] {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.product-dropdown-button[data-product-dropdown-button] {
    background: linear-gradient(180deg, var(--product-tint, rgba(255,255,255,0.06)), rgba(255,255,255,0.03));
}
.product-dropdown-button[data-product-dropdown-button]:not(.is-placeholder) {
    border-color: var(--product-tint-strong, rgba(162, 180, 255, 0.22));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px var(--product-tint, rgba(255,255,255,0.04));
}
.product-dropdown-option[data-product-dropdown-option] {
    background: var(--product-tint, transparent);
}
.product-dropdown-option[data-product-dropdown-option]:not(.is-placeholder) {
    border: 1px solid transparent;
}
.product-dropdown-option[data-product-dropdown-option]:not(.is-placeholder):hover,
.product-dropdown-option[data-product-dropdown-option].is-selected {
    background: var(--product-tint-strong, rgba(118, 64, 255, 0.2));
    border-color: var(--product-tint-strong, rgba(162, 180, 255, 0.18));
    color: var(--product-text-color, #eef2ff);
}
.product-dropdown-button.is-placeholder {
    color: #aeb8dc;
}
.product-dropdown-button-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.product-dropdown-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.product-dropdown-caret {
    color: #cbd5ff;
    font-size: 1rem;
    flex: 0 0 auto;
}
.product-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.82);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.28);
    flex: 0 0 14px;
}
.product-color-dot.is-empty {
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04)) !important;
    border-color: rgba(255,255,255,0.4);
}
.product-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    display: none;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(162, 180, 255, 0.16);
    background: rgba(10, 18, 50, 0.98);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
}
.product-dropdown.is-open .product-dropdown-menu {
    display: grid;
    gap: 2px;
}
.product-dropdown-option {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #eef2ff;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.product-dropdown-option.is-placeholder {
    color: #aeb8dc;
}
.product-dropdown-option-text {
    display: block;
}
.material-row [data-product-select-wrap] {
    position: relative;
    z-index: 70;
}
@media (max-width: 720px) {
    .product-dropdown-button {
        min-height: 50px;
        padding: 10px 12px;
    }
    .product-dropdown-option {
        min-height: 36px;
        padding: 7px 10px;
    }
}

.material-row label > span { margin-bottom: 6px; display: inline-block; font-size: 0.92rem; }
.material-row input, .material-row textarea { min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
.order-form .form-section:last-of-type { margin-bottom: 0; }


.order-form .form-section-collapsible summary {
    position: relative;
    z-index: 1;
}
.order-form .form-section-collapsible .form-section-body {
    position: relative;
    z-index: 2;
}
.materials-box,
.materials-list,
.material-row,
.material-row-grid,
.material-row [data-product-select-wrap],
.product-dropdown {
    overflow: visible;
}
.material-row {
    position: relative;
}
.material-row.is-dropdown-open {
    z-index: 260;
}
.product-dropdown {
    z-index: 80;
}
.product-dropdown.is-open {
    z-index: 320;
}
.product-dropdown-menu {
    z-index: 330;
}
.product-dropdown-option {
    min-height: 32px;
    padding: 5px 10px;
}

.stats-grid-stl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

.stat-card-stl {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    min-height: 132px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(12, 22, 64, 0.98) 0%, rgba(10, 18, 52, 0.96) 100%);
    border: 1px solid rgba(162, 180, 255, 0.16);
}

.stat-card-stl::after {
    content: '';
    position: absolute;
    inset: auto -20% -40% auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 70, 255, 0.22) 0%, rgba(140, 70, 255, 0) 70%);
    pointer-events: none;
}

.stat-card-stl span {
    font-size: 0.88rem;
    color: #c6d2ff;
    margin-bottom: 10px;
}

.stat-card-stl strong {
    justify-content: flex-start;
    text-align: left;
    font-size: clamp(1.9rem, 2.8vw, 2.55rem);
    line-height: 1;
    margin-bottom: 10px;
}

.stat-card-stl small {
    display: block;
    margin-top: auto;
    color: #8fa2df;
    font-size: 0.82rem;
}

.stat-card-stl-primary {
    background: linear-gradient(135deg, rgba(74, 34, 170, 0.96) 0%, rgba(26, 49, 144, 0.96) 55%, rgba(10, 23, 74, 0.98) 100%);
    border-color: rgba(181, 162, 255, 0.25);
}

.stl-form {
    display: grid;
    gap: 1.25rem;
}

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

.stl-note-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stl-note-box {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(162, 180, 255, 0.15);
    color: #d9e3ff;
    line-height: 1.6;
}

.stl-note-box strong {
    color: #ffffff;
}

.alert-list {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
}

.stl-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.stl-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(162, 180, 255, 0.14);
    color: #d8e1ff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.stl-chip-accent {
    background: rgba(141, 70, 255, 0.18);
    border-color: rgba(181, 162, 255, 0.24);
    color: #f1e9ff;
}

.stl-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.stl-result-card {
    border: 1px solid rgba(162, 180, 255, 0.14);
    border-radius: 24px;
    padding: 1.15rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(8px);
}

.stl-result-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #ffffff;
}

.stl-result-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.stl-result-list div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(162, 180, 255, 0.12);
}

.stl-result-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.stl-result-list dt {
    margin: 0;
    color: #aebeea;
    font-weight: 600;
    font-size: 0.92rem;
}

.stl-result-list dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: #ffffff;
    max-width: 58%;
    word-break: break-word;
}

.stl-callout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stl-note-box-soft {
    background: rgba(74, 123, 255, 0.10);
    border: 1px solid rgba(98, 152, 255, 0.22);
}

.stl-note-box-spaced {
    margin-top: 1rem;
}

.stl-table-wrap {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(162, 180, 255, 0.12);
    background: rgba(255,255,255,0.03);
}

.stl-table-wrap .table thead th {
    background: rgba(255,255,255,0.05);
}

.stl-table-wrap .table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

@media (max-width: 1400px) {
    .stats-grid-stl,
    .stl-result-grid,
    .stl-callout-grid,
    .stl-note-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .stats-grid-stl,
    .stl-result-grid,
    .stl-callout-grid,
    .stl-note-row {
        grid-template-columns: 1fr;
    }

    .stl-result-list div {
        flex-direction: column;
        gap: 0.35rem;
    }

    .stl-result-list dd {
        text-align: left;
        max-width: 100%;
    }

    .stl-summary-bar {
        gap: 8px;
    }

    .stl-chip {
        width: 100%;
        justify-content: flex-start;
    }
}


.stl-upload-progress {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(162, 180, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
}

.stl-upload-progress.is-hidden {
    display: none;
}

.stl-upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.stl-upload-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.stl-upload-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(132, 92, 255, 0.95) 0%, rgba(91, 168, 255, 0.95) 100%);
    transition: width 0.25s ease;
}

.stl-viewer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stl-viewer-card {
    min-height: 100%;
}

.stl-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.stl-viewer-head h3 {
    margin-bottom: 0.35rem;
}

.btn-sm {
    min-height: 38px;
    padding: 0 14px;
}

.stl-viewer-frame {
    position: relative;
    min-height: 420px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(162, 180, 255, 0.14);
    background: linear-gradient(180deg, rgba(7, 12, 26, 0.98) 0%, rgba(12, 18, 34, 0.98) 100%);
}

.stl-viewer-frame canvas {
    display: block;
    width: 100%;
    height: 420px;
}

.stl-viewer-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    color: #d9e3ff;
    z-index: 2;
    background: linear-gradient(180deg, rgba(7, 12, 26, 0.4) 0%, rgba(12, 18, 34, 0.2) 100%);
}

.stl-viewer-tip {
    margin-top: 0.8rem;
}

.stl-plate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.stl-plate-card {
    margin: 0;
    padding: 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(162, 180, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.stl-plate-card img {
    display: block;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(162, 180, 255, 0.12);
    background: rgba(9, 15, 31, 0.9);
}

.stl-plate-card figcaption {
    margin-top: 0.65rem;
    color: #d8e1ff;
    font-weight: 700;
}

@media (max-width: 1400px) {
    .stl-viewer-grid,
    .stl-plate-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .stl-viewer-frame,
    .stl-viewer-frame canvas {
        min-height: 320px;
        height: 320px;
    }

    .stl-viewer-head,
    .stl-upload-progress-head {
        flex-direction: column;
        align-items: flex-start;
    }
}


.stl-viewer-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:14px;gap:10px}.stl-viewer-fallback img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.28);object-fit:contain}.stl-viewer-fallback-caption{font-size:13px;color:#c4cae5;text-align:center}


.orders-tabs {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.orders-tab {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(162, 180, 255, 0.16);
    background: rgba(255,255,255,0.04);
    color: #cfd8ff;
    text-decoration: none;
    font-weight: 700;
    transition: 0.18s ease;
}
.orders-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(162, 180, 255, 0.28);
}
.orders-tab.is-active {
    background: linear-gradient(135deg, rgba(118, 64, 255, 0.28), rgba(72, 187, 255, 0.18));
    border-color: rgba(162, 180, 255, 0.34);
    color: #fff;
}

.orders-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: inherit;
    font-size: 0.82rem;
    line-height: 1;
}
.badge-delivered {
    background: rgba(50, 180, 110, 0.18);
    color: #d4ffe7;
}
.badge-not-delivered {
    background: rgba(255, 145, 77, 0.16);
    color: #ffd8b8;
}
.compact-item-main-with-photo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.compact-item-text {
    min-width: 0;
}
.compact-item-text strong,
.compact-item-text span,
.compact-item-text p {
    display: block;
}
.order-thumb-wrap {
    flex: 0 0 54px;
}
.order-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.03);
}
.order-photo-preview-inline {
    margin-top: 10px;
}
.order-photo-preview-inline img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.22);
}
.field-help {
    display: block;
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 0.85rem;
}
.form-footer-sticky {
    z-index: 40;
    background: linear-gradient(180deg, rgba(12, 18, 32, 0) 0%, rgba(12, 18, 32, 0.92) 28%);
    padding-bottom: 4px;
}
.form-footer-sticky .btn {
    position: relative;
    z-index: 45;
}


.compact-item-main-photo {
    display: flex;
    gap: 14px;
    align-items: center;
}

.compact-photo-thumb {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.compact-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.stock-bulk-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stock-bulk-table {
    display: grid;
    gap: 10px;
}

.stock-bulk-head,
.stock-bulk-row {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) 120px;
    gap: 14px;
    align-items: center;
}

.stock-bulk-head {
    padding: 0 6px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stock-bulk-row {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.42);
}

.stock-bulk-product {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stock-bulk-product strong {
    font-size: 0.98rem;
}

.stock-bulk-input input {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
}

.stock-bulk-save-placeholder {
    display: flex;
    justify-content: flex-end;
    font-size: 0.85rem;
}

.stock-bulk-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 860px) {
    .stock-bulk-head {
        display: none;
    }

    .stock-bulk-row {
        grid-template-columns: 1fr;
    }

    .stock-bulk-save-placeholder {
        justify-content: flex-start;
    }

    .stock-bulk-actions {
        justify-content: stretch;
    }

    .stock-bulk-actions .btn {
        width: 100%;
    }
}


.alert-warning {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fde7bf;
}

.stock-alert-box {
    margin-bottom: 18px;
}

.stock-alert-box strong {
    display: block;
    margin-bottom: 6px;
}


.badge-channel {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
}

.badge-channel-vinted {
  background: rgba(0, 184, 148, 0.16);
  color: #b9fff0;
}

.badge-channel-instagram {
  background: rgba(214, 51, 132, 0.16);
  color: #ffd0e7;
}

.badge-channel-facebook {
  background: rgba(59, 89, 152, 0.18);
  color: #dce7ff;
}

.badge-channel-site {
  background: rgba(72, 187, 255, 0.14);
  color: #d7f2ff;
}

.badge-channel-whatsapp {
  background: rgba(37, 211, 102, 0.14);
  color: #d6ffe4;
}

.badge-channel-loja {
  background: rgba(255, 184, 77, 0.14);
  color: #ffe7b8;
}

.badge-channel-outro {
  background: rgba(255, 255, 255, 0.08);
  color: #eef2ff;
}


.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.badge-channel {
  width: 40px;
  min-width: 40px;
  height: 34px;
  justify-content: center;
  padding: 0;
  margin-top: 0;
  position: relative;
}

.badge-channel::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.badge-channel-vinted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300c7b1' d='M5.2 5.2c1.5 0 2.6 1.1 3.4 3.6l1.4 4.6 1.7-5.4c.6-1.8 1.6-2.8 3.3-2.8 1 0 1.8.3 2.6.9l-.8 2.2c-.5-.3-.9-.4-1.3-.4-.7 0-1.1.4-1.4 1.5l-3 9H9.2L5.3 5.3z'/%3E%3C/svg%3E");
}

.badge-channel-instagram::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='4' ry='4' fill='none' stroke='%23ff4fa0' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%23ff4fa0' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.3' fill='%23ff4fa0'/%3E%3C/svg%3E");
}

.badge-channel-facebook::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238ab4ff' d='M13.7 20v-6.4h2.1l.3-2.6h-2.4V9.3c0-.8.2-1.3 1.4-1.3h1.2V5.7c-.2 0-.9-.1-1.8-.1-1.8 0-3 1.1-3 3.2v1.8H9.4v2.6h2.1V20z'/%3E%3C/svg%3E");
}

.badge-channel-site::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%237ad4ff' stroke-width='2'/%3E%3Cpath d='M4 12h16M12 4a12 12 0 0 1 0 16M12 4a12 12 0 0 0 0 16' fill='none' stroke='%237ad4ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.badge-channel-whatsapp::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2374f39a' d='M12 4a8 8 0 0 0-6.9 12l-1 4 4.1-1A8 8 0 1 0 12 4zm4.2 11.1c-.2.6-1.2 1-1.7 1.1-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.5-2.5-1.1-4.1-3.7-4.2-3.9-.1-.2-1-1.3-1-2.5 0-1.2.6-1.8.8-2 .2-.2.5-.3.7-.3h.5c.2 0 .4 0 .5.4.2.4.7 1.6.7 1.7.1.1.1.3 0 .4-.1.2-.2.3-.4.5l-.3.3c-.1.1-.2.3-.1.5.1.2.5.9 1.2 1.5.8.7 1.5 1 1.7 1.1.2.1.4.1.5-.1l.7-.9c.2-.2.3-.2.5-.1l1.5.7c.2.1.4.2.4.4 0 .1 0 .6-.2 1.1z'/%3E%3C/svg%3E");
}

.badge-channel-loja::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd48a' d='M4 10h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2.2-5h11.6l1.2 3H5z'/%3E%3Cpath fill='%23161b28' d='M9 13h6v7H9z'/%3E%3C/svg%3E");
}

.badge-channel-outro::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='2' fill='%23e7ecff'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23e7ecff'/%3E%3Ccircle cx='18' cy='12' r='2' fill='%23e7ecff'/%3E%3C/svg%3E");
}


.channel-filter-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.channel-filter {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  opacity: 0.72;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.channel-filter:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.channel-filter.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(122, 212, 255, 0.18);
  border-color: rgba(122, 212, 255, 0.38);
}

.channel-filter-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #eef2ff;
  font-weight: 700;
}


.panel-head-with-tools,
.panel-head-tools {
    display: flex;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
}

.inline-filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
}

.inline-filter-form label {
    display: grid;
    gap: 6px;
}

.inline-filter-form span {
    font-size: 0.82rem;
    color: var(--text-muted, #9aa4bf);
}



.stats-grid-dashboard-main {
    gap: 16px;
}

.stat-card-premium {
    position: relative;
    min-height: 94px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(162, 180, 255, 0.12);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(145deg, rgba(16, 28, 74, 0.96), rgba(9, 18, 52, 0.98));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

.stat-card-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 32%);
    pointer-events: none;
}

.stat-card-premium span,
.stat-card-premium strong {
    position: relative;
    z-index: 1;
}

.stat-card-premium span {
    font-size: 0.83rem;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}

.stat-card-premium strong {
    justify-content: flex-start;
    text-align: left;
    font-size: clamp(1.72rem, 2vw, 2.18rem);
    font-weight: 800;
}

.stat-card-total strong {
    color: #f4f7ff;
}

.stat-card-success strong {
    color: #63f0b1;
}

.stat-card-warning strong {
    color: #ffab5b;
}

.stat-card-attention strong {
    color: #ffd76a;
}

.stat-card-danger strong {
    color: #ff7a92;
}

.stat-card-profit strong {
    font-weight: 900;
    text-shadow: 0 0 22px rgba(99, 240, 177, 0.15);
}

.panel-head-with-tools {
    align-items: center;
}

.panel-head-tools {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.inline-filter-form-compact {
    gap: 10px;
    flex-wrap: nowrap;
}

.inline-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-filter-label span {
    margin: 0;
    white-space: nowrap;
}

.inline-filter-form-compact select {
    min-width: 180px;
}

.btn-inline-tight {
    min-height: 46px;
    white-space: nowrap;
}

.dashboard-categories {
  display: grid;
  gap: 20px;
  margin-bottom: 22px;
}

.dashboard-category {
  display: grid;
  gap: 12px;
}

.dashboard-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-category-head .eyebrow {
  margin: 0;
}


@media (max-width: 900px) {
    .panel-head-tools,
    .inline-filter-form-compact,
    .inline-filter-label {
        flex-wrap: wrap;
    }

    .panel-head-tools {
        width: 100%;
        justify-content: flex-start;
    }
}


.stats-grid-dashboard-main {
    gap: 18px;
}

.stat-card-premium {
    min-height: 88px;
    padding: 13px 16px;
}

.stat-card-meta {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(231, 236, 255, 0.76);
}

.stat-card-meta-count {
    font-weight: 800;
}

.stat-card-meta-danger .stat-card-meta-count {
    color: #ff7a92;
}


/* Dashboard premium refinement */
.stats-grid-dashboard-main {
    gap: 20px;
}

.stat-card-premium {
    min-height: 84px;
    padding: 14px 16px 13px;
    border-radius: 20px;
    border: 1px solid rgba(162, 180, 255, 0.11);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.09), transparent 38%),
        linear-gradient(155deg, rgba(18, 31, 82, 0.98), rgba(8, 16, 47, 0.98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255,255,255,0.04);
}

.stat-card-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.05);
}

.stat-card-premium::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    opacity: 0.9;
    background: rgba(255,255,255,0.08);
}

.stat-card-total::before { background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); }
.stat-card-success::before { background: linear-gradient(90deg, rgba(99, 240, 177, 0.95), rgba(99, 240, 177, 0)); }
.stat-card-warning::before { background: linear-gradient(90deg, rgba(255, 171, 91, 0.95), rgba(255, 171, 91, 0)); }
.stat-card-attention::before { background: linear-gradient(90deg, rgba(255, 215, 106, 0.95), rgba(255, 215, 106, 0)); }
.stat-card-danger::before { background: linear-gradient(90deg, rgba(255, 122, 146, 0.95), rgba(255, 122, 146, 0)); }

.stat-card-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.stat-card-label .stat-card-icon,
.stat-card-label .stat-card-label-text {
    margin-bottom: 0;
}

.stat-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    font-size: 0.9rem;
    font-weight: 800;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    vertical-align: middle;
    flex-shrink: 0;
}

.stat-card-label-text {
    display: inline-block;
    margin: 0;
    line-height: 1.2;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
    color: #dfe7ff;
}

.stat-card-premium > span {
    display: none;
}

.stat-card-premium strong {
    font-size: clamp(1.6rem, 1.9vw, 2.02rem);
    line-height: 1.05;
}

.stat-card-success .stat-card-icon {
    color: #63f0b1;
    background: rgba(99, 240, 177, 0.10);
    box-shadow: 0 0 22px rgba(99, 240, 177, 0.10);
}

.stat-card-danger .stat-card-icon {
    color: #ff7a92;
    background: rgba(255, 122, 146, 0.11);
}

.stat-card-warning .stat-card-icon {
    color: #ffab5b;
    background: rgba(255, 171, 91, 0.11);
}

.stat-card-attention .stat-card-icon {
    color: #ffd76a;
    background: rgba(255, 215, 106, 0.11);
}

.stat-card-total .stat-card-icon {
    color: #f4f7ff;
}

.stat-card-profit {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(99, 240, 177, 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}

.stat-card-profit strong {
    font-size: clamp(1.74rem, 2vw, 2.18rem);
}

.stat-card-meta {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.76rem;
}

.panel-head-tools {
    gap: 10px;
}

.inline-filter-form-compact {
    align-items: center;
    gap: 10px;
}

.inline-filter-label {
    gap: 8px;
}

.inline-filter-form-compact select {
    min-width: 170px;
}

.btn-inline-tight {
    min-height: 44px;
    padding: 0 16px;
}

@media (max-width: 900px) {
    .stats-grid-dashboard-main {
        gap: 14px;
    }

    .stat-card-premium {
        min-height: 80px;
        padding: 13px 14px 12px;
    }

    .stat-card-icon {
        width: 28px;
        height: 28px;
        border-radius: 10px;
    }
}



.stat-card-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0;
    position: static;
    transform: none;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

.stat-card-icon svg rect,
.stat-card-icon svg circle,
.stat-card-icon svg path {
    vector-effect: non-scaling-stroke;
}


.stat-card-icon svg { overflow: visible; }
.stat-card-total .stat-card-icon { background: rgba(255,255,255,0.08); }
.stat-card-total .stat-card-icon svg { stroke-width: 1.8; }
.stat-card-success .stat-card-icon svg,
.stat-card-warning .stat-card-icon svg,
.stat-card-attention .stat-card-icon svg,
.stat-card-danger .stat-card-icon svg { filter: drop-shadow(0 0 8px rgba(0,0,0,0.08)); }

.parts-checklist {
    display: grid;
    gap: 12px;
}

.part-check-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
}

.part-check-item.is-done {
    border-color: rgba(45, 212, 191, 0.35);
    background: rgba(45, 212, 191, 0.08);
}

.part-check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.part-check-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.part-check-body small {
    color: var(--muted, #94a3b8);
}

.part-check-status {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
}

.part-check-status.is-done {
    background: rgba(45, 212, 191, 0.16);
    color: #99f6e4;
}

.material-row-grid-parts {
    grid-template-columns: 1.3fr 1fr;
}

.empty-inline-note {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
}


.migrations-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.migrations-panel {
    display: grid;
    gap: 18px;
}

.migrations-list {
    display: grid;
    gap: 14px;
}

.migration-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
}

.migration-card-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.migration-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.migration-title-row strong {
    font-size: 1rem;
    word-break: break-word;
}

.migration-meta {
    display: flex;
    gap: 10px 14px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.migration-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    min-width: min(340px, 100%);
}

.migration-actions form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.migration-manual-form input[type="text"] {
    min-width: 220px;
    flex: 1 1 240px;
}

.migration-note-box {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.22);
    color: #e4dcff;
    font-size: 0.92rem;
}

.migrations-head-action {
    display: flex;
}

@media (max-width: 1180px) {
    .migrations-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .migration-card {
        grid-template-columns: 1fr;
    }

    .migration-actions {
        min-width: 0;
    }

    .migration-actions form {
        justify-content: stretch;
    }

    .migration-actions form .btn,
    .migration-actions form input[type="text"] {
        width: 100%;
    }
}

.migrations-topbar {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 16px;
    margin-bottom: 16px;
}

.migration-backup-callout,
.migration-insight-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    box-shadow: 0 14px 40px rgba(4, 10, 32, 0.22);
}

.migration-callout-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(124, 92, 255, 0.18);
    font-size: 1.25rem;
}

.migration-backup-callout strong,
.migration-insight-card strong {
    display: block;
    margin-bottom: 6px;
}

.migration-backup-callout p,
.migration-insight-card p {
    margin: 0;
    color: var(--text-soft);
}

.migrations-summary-grid-pro {
    margin-bottom: 18px;
}

.migrations-panel-pro {
    gap: 22px;
}

.migrations-filterbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.migrations-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #d9e5ff;
    text-decoration: none;
    transition: .18s ease;
}

.migrations-filter-chip strong {
    min-width: 24px;
    text-align: center;
    color: #fff;
}

.migrations-filter-chip:hover,
.migrations-filter-chip.is-active {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.28);
    transform: translateY(-1px);
}

.migrations-list-pro {
    gap: 16px;
}

.migration-card-pro {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)),
        rgba(8, 17, 54, 0.75);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.migration-card-top,
.migration-card-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.migration-title-row-pro {
    gap: 12px;
}

.migration-title-row-pro strong {
    font-size: 1.02rem;
}

.migration-meta-pro {
    margin-top: 10px;
}

.migration-recommendation-box {
    min-width: 280px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.18);
}

.migration-recommendation-label {
    display: block;
    margin-bottom: 4px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #a5b4fc;
}

.migration-recommendation-box strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

.migration-recommendation-box p {
    margin: 0;
    color: #d6def7;
    font-size: .92rem;
}

.risk-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.risk-low {
    background: rgba(45, 212, 191, 0.14);
    color: #99f6e4;
}

.risk-medium {
    background: rgba(59, 130, 246, 0.14);
    color: #bfdbfe;
}

.risk-medium-plus {
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
}

.migration-details {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    overflow: hidden;
}

.migration-details summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 700;
}

.migration-details summary::-webkit-details-marker {
    display: none;
}

.migration-details-grid {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.migration-details-grid div {
    display: grid;
    gap: 5px;
}

.migration-details-grid span {
    font-size: .82rem;
    color: var(--text-soft);
}

.migration-details-grid code {
    display: block;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.22);
    color: #dbeafe;
}

.migration-actions-pro {
    min-width: min(430px, 100%);
    gap: 12px;
}

.migration-actions-pro form {
    justify-content: flex-end;
}

.migration-manual-form-pro input[type="text"] {
    min-width: 290px;
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
}

@media (max-width: 1180px) {
    .migrations-topbar,
    .migration-card-top,
    .migration-card-bottom {
        grid-template-columns: 1fr;
    }

    .migration-recommendation-box,
    .migration-actions-pro {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .migrations-filter-chip {
        width: 100%;
        justify-content: space-between;
    }
}

/* Phase 6.1 - Migrations simple UI */
.migrations-simple-head {
  align-items: center;
}

.migrations-simple-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #dfe7ff;
  margin-bottom: 18px;
}

.migrations-simple-callout span {
  color: rgba(223,231,255,0.78);
}

.migrations-simple-summary {
  margin-bottom: 18px;
}

.migrations-simple-panel {
  display: grid;
  gap: 14px;
}

.migrations-simple-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.migrations-simple-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.migrations-simple-list {
  display: grid;
  gap: 12px;
}

.migration-row-card {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
}

.migration-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.migration-row-title {
  min-width: 0;
  flex: 1;
}

.migration-row-title strong {
  display: block;
  font-size: 15px;
  color: #fff;
  margin-bottom: 8px;
  word-break: break-word;
}

.migration-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.migration-row-type {
  font-size: 12px;
  color: rgba(223,231,255,0.72);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.migration-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.migration-row-details {
  margin-top: 10px;
}

.migration-row-details summary,
.migrations-group-toggle summary {
  cursor: pointer;
  color: rgba(223,231,255,0.86);
}

.migration-row-details summary {
  font-size: 13px;
}

.migrations-group-toggle {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}

.migrations-group-toggle summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-weight: 700;
}

.migrations-group-toggle summary::-webkit-details-marker,
.migration-row-details summary::-webkit-details-marker {
  display: none;
}

.migrations-group-toggle summary span {
  min-width: 28px;
  text-align: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

.migrations-mini-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.migration-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.migration-mini-row > div {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .migrations-simple-callout,
  .migration-row-main,
  .migrations-simple-panel-head,
  .migration-mini-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .migration-row-actions {
    justify-content: flex-start;
  }
}

.readiness-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.readiness-summary-grid .stat-card strong {
  font-size: 1.05rem;
}

.readiness-good {
  border-color: rgba(76, 175, 80, 0.35);
  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.14);
}

.readiness-warn {
  border-color: rgba(255, 193, 7, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.14);
}

.readiness-callout {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: stretch;
}

.readiness-callout-good {
  border-left: 4px solid rgba(76, 175, 80, 0.9);
}

.readiness-callout-warn {
  border-left: 4px solid rgba(255, 193, 7, 0.9);
}

.readiness-flag-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  width: min(520px, 100%);
}

.readiness-flag-box {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.readiness-flag-box span,
.readiness-row .small {
  display: block;
  font-size: 12px;
  color: rgba(223,231,255,0.66);
}

.readiness-list {
  display: grid;
  gap: 10px;
}

.readiness-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.readiness-row.is-ok {
  border-color: rgba(76, 175, 80, 0.18);
}

.readiness-row.is-missing {
  border-color: rgba(255, 193, 7, 0.18);
}

.readiness-code-block {
  border-radius: 18px;
  background: rgba(7, 16, 35, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.readiness-code-block pre {
  margin: 0;
  padding: 18px;
  overflow: auto;
  color: #dfe7ff;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .readiness-callout,
  .readiness-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .readiness-flag-boxes {
    grid-template-columns: 1fr;
  }
}

.backup-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.backup-list {
    display: grid;
    gap: 12px;
}
.backup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
}
.backup-item-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.backup-item-main strong {
    font-size: 1rem;
    word-break: break-word;
}
.backup-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.backup-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.backup-item-actions form { margin: 0; }
.backup-page-callout code {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2px 8px;
    color: #fff;
}
@media (max-width: 900px) {
    .backup-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .backup-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .backup-item-actions {
        width: 100%;
    }
}
@media (max-width: 640px) {
    .backup-summary-grid {
        grid-template-columns: 1fr;
    }
    .backup-item-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .backup-item-actions .btn,
    .backup-item-actions form {
        width: 100%;
    }
}

.update-upload-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}
.update-upload-form .btn {
    white-space: nowrap;
}
.file-input-inline {
    display: grid;
    gap: 6px;
    min-width: min(320px, 100%);
}
.file-input-inline span {
    font-size: 0.88rem;
    color: var(--text-soft);
}
.file-input-inline input[type="file"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    padding: 10px 12px;
}
.update-item {
    align-items: flex-start;
}
.update-item-main {
    width: 100%;
}
.update-item-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.update-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 700;
}
.update-status.status-success {
    background: rgba(34, 197, 94, 0.14);
    color: #b9ffcb;
    border-color: rgba(34, 197, 94, 0.35);
}
.update-status.status-pending {
    background: rgba(245, 158, 11, 0.14);
    color: #ffe3ad;
    border-color: rgba(245, 158, 11, 0.35);
}
.update-status.status-danger {
    background: rgba(239, 68, 68, 0.14);
    color: #ffc2c2;
    border-color: rgba(239, 68, 68, 0.35);
}
.update-description {
    margin: 2px 0 0;
    color: var(--text-soft);
}
.update-error {
    color: #ffb7b7;
}
.update-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.update-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 0.82rem;
}
.update-callout {
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .update-upload-form {
        width: 100%;
    }
    .file-input-inline {
        min-width: 100%;
    }
}

.panel-orders-filters {
    display: grid;
    gap: 16px;
}
.orders-quickbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: center;
}
.orders-search-live input {
    min-height: 48px;
}
.orders-quickchips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.orders-chip {
    border: 1px solid rgba(162, 180, 255, 0.16);
    background: rgba(255,255,255,0.04);
    color: #dbe3ff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}
.orders-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(162, 180, 255, 0.3);
}
.orders-chip.is-active {
    background: linear-gradient(135deg, rgba(118, 64, 255, 0.28), rgba(72, 187, 255, 0.18));
    border-color: rgba(162, 180, 255, 0.34);
    color: #fff;
}
.filters-grid-orders-advanced {
    margin-top: 4px;
}
.empty-state-inline {
    margin-top: 14px;
}
@media (max-width: 980px) {
    .orders-quickbar {
        grid-template-columns: 1fr;
    }
    .orders-advanced-toggle {
        width: 100%;
    }
}


/* Orders layout cleanup v2 */
.panel-orders-simplified {
    display: grid;
    gap: 18px;
}
.orders-toolbar-top {
    display: grid;
    gap: 14px;
}
.orders-viewchips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.orders-viewchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(162, 180, 255, 0.14);
    background: rgba(255,255,255,0.035);
    color: #d8e2ff;
    text-decoration: none;
    font-weight: 700;
    transition: .18s ease;
}
.orders-viewchip small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    font-size: .78rem;
    color: inherit;
}
.orders-viewchip:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(162, 180, 255, 0.24);
}
.orders-viewchip.is-active {
    background: linear-gradient(135deg, rgba(118, 64, 255, 0.24), rgba(72, 187, 255, 0.16));
    border-color: rgba(162, 180, 255, 0.30);
    color: #fff;
}
.orders-toolbar-actions {
    display: flex;
    justify-content: flex-end;
}
.stats-grid-orders-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.orders-advanced-panel {
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.compact-item summary {
    gap: 18px;
}
.compact-item-side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.compact-item-text strong {
    font-size: 1rem;
    margin-bottom: 2px;
}
.compact-item-text span {
    color: #b7c3ee;
    font-size: .92rem;
}
.compact-item-text p {
    margin-top: 4px;
}
@media (max-width: 980px) {
    .stats-grid-orders-clean {
        grid-template-columns: 1fr;
    }
    .orders-toolbar-actions {
        justify-content: stretch;
    }
    .orders-toolbar-actions .btn {
        width: 100%;
    }
}