:root {
         --primary: #19253f;
         --accent: #19253f;
         --accent-light: #eef1ff;
         --bg: #F0F0F0;
         --card-bg: #ffffff;
         --text: #1e293b;
         --text-muted: #64748b;
         --border: #e2e8f0;
         --success: #10b981;
         --warning: #f59e0b;
         --danger: #ef4444;
     }

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

     body {
         font-family: 'Plus Jakarta Sans', sans-serif;
         background: var(--bg);
         color: var(--text);
         display: flex;
         min-height: 100vh;
     }

     /* ── SIDEBAR PLACEHOLDER ── */


     /* ── MAIN CONTENT ── */
     .main {
         flex: 1;
         display: flex;
         flex-direction: column;
         min-width: 0;
         padding: 28px 32px;
         overflow-y: auto;
     }

     /* ── TOP BAR ── */
     .topbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 24px;
         gap: 16px;
         flex-wrap: wrap;
     }

     .topbar-left {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .page-title {
         font-size: 1.35rem;
         font-weight: 800;
         color: var(--primary);
         letter-spacing: -0.5px;
     }

     .badge-count {
         background: var(--accent-light);
         color: var(--accent);
         font-size: 0.72rem;
         font-weight: 700;
         padding: 3px 9px;
         border-radius: 20px;
     }

     .topbar-right {
         display: flex;
         align-items: center;
         gap: 10px;
         flex-wrap: wrap;
     }

     .search-wrap {
         position: relative;
     }

     .search-wrap span {
         position: absolute;
         left: 10px;
         top: 50%;
         transform: translateY(-50%);
         font-size: 1.1rem;
         color: var(--text-muted);
         pointer-events: none;
     }

     .search-input {
         background: var(--card-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
         padding: 8px 14px 8px 34px;
         font-size: 0.83rem;
         font-family: inherit;
         color: var(--text);
         width: 220px;
         outline: none;
         transition: border 0.2s;
     }

     .search-input:focus {
         border-color: var(--accent);
     }

     .btn {
         display: flex;
         align-items: center;
         gap: 6px;
         padding: 8px 16px;
         border-radius: 10px;
         font-size: 0.82rem;
         font-weight: 600;
         font-family: inherit;
         cursor: pointer;
         border: none;
         transition: all 0.2s;
     }

     .btn-primary {
         background: var(--accent);
         color: #fff;
     }

     .btn-primary:hover {
         background: #3d5ce0;
     }

     .btn-ghost {
         background: var(--card-bg);
         color: var(--text-muted);
         border: 1px solid var(--border);
     }

     .btn-ghost:hover {
         background: var(--accent-light);
         color: var(--accent);
         border-color: var(--accent);
     }

     .btn span {
         font-size: 1rem;
     }

     /* ── VIEW TOGGLE ── */
     .view-toggle {
         display: flex;
         background: var(--card-bg);
         border: 1px solid var(--border);
         border-radius: 10px;
         overflow: hidden;
     }

     .view-btn {
         display: flex;
         align-items: center;
         gap: 6px;
         padding: 7px 14px;
         font-size: 0.78rem;
         font-weight: 600;
         font-family: inherit;
         cursor: pointer;
         border: none;
         background: transparent;
         color: var(--text-muted);
         transition: all 0.2s;
     }

     .view-btn.active {
         background: var(--accent);
         color: #fff;
     }

     .view-btn span {
         font-size: 1rem;
     }

     /* ── FILTER BAR ── */
     .filter-bar {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 18px;
         flex-wrap: wrap;
     }

     .filter-chip {
         padding: 5px 14px;
         border-radius: 20px;
         font-size: 0.78rem;
         font-weight: 600;
         cursor: pointer;
         border: 1.5px solid var(--border);
         background: var(--card-bg);
         color: var(--text-muted);
         transition: all 0.18s;
     }

     .filter-chip.active {
         background: var(--primary);
         color: #fff;
         border-color: var(--primary);
     }

     .filter-chip:hover:not(.active) {
         border-color: var(--accent);
         color: var(--accent);
     }

     .filter-select {
         padding: 5px 12px;
         border-radius: 20px;
         font-size: 0.78rem;
         font-weight: 600;
         font-family: inherit;
         border: 1.5px solid var(--border);
         background: var(--card-bg);
         color: var(--text-muted);
         outline: none;
         cursor: pointer;
         margin-left: auto;
     }

     /* ── TABLE VIEW ── */
     .table-card {
         background: var(--card-bg);
         border-radius: 16px;
         border: 1px solid var(--border);
         overflow: hidden;
         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
     }

     .products-table {
         width: 100%;
         border-collapse: collapse;
     }

     .products-table thead tr {
         background: #f8fafc;
         border-bottom: 1px solid var(--border);
     }

     .products-table th {
         padding: 13px 16px;
         text-align: left;
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--text-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
     }

     .products-table th.sortable {
         cursor: pointer;
         user-select: none;
     }

     .products-table th.sortable:hover {
         color: var(--accent);
     }

     .products-table th .sort-icon {
         font-size: 0.85rem;
         vertical-align: middle;
         opacity: 0.5;
     }

     .products-table tbody tr {
         border-bottom: 1px solid #f1f5f9;
         transition: background 0.15s;
     }

     .products-table tbody tr:last-child {
         border-bottom: none;
     }

     .products-table tbody tr:hover {
         background: #fafbff;
     }

     .products-table td {
         padding: 12px 16px;
         font-size: 0.84rem;
         vertical-align: middle;
     }

     /* Product cell */
     .product-cell {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .product-img {
         width: 44px;
         height: 44px;
         border-radius: 10px;
         object-fit: cover;
         background: #f1f5f9;
         flex-shrink: 0;
         border: 1px solid var(--border);
     }

     .product-name {
         font-weight: 700;
         color: var(--text);
         font-size: 0.85rem;
         line-height: 1.3;
     }

     .product-sku {
         font-size: 0.72rem;
         color: var(--text-muted);
         margin-top: 2px;
     }

     /* Stock badge */
     .stock-badge {
         display: inline-flex;
         align-items: center;
         gap: 4px;
         padding: 3px 10px;
         border-radius: 20px;
         font-size: 0.72rem;
         font-weight: 700;
     }

     .stock-ok {
         background: #d1fae5;
         color: #065f46;
     }

     .stock-low {
         background: #fef3c7;
         color: #92400e;
     }

     .stock-out {
         background: #fee2e2;
         color: #991b1b;
     }

     /* Tag */
     .tag {
         background: var(--accent-light);
         color: var(--accent);
         padding: 4px 10px;
         border-radius: 6px;
         font-size: 0.72rem;
         font-weight: 600;
     }

     /* ── INLINE EDIT ── */
     .editable {
         cursor: pointer;
         border-radius: 6px;
         padding: 4px 8px;
         transition: background 0.15s;
         display: inline-block;
         min-width: 50px;
     }

     .editable:hover {
         background: var(--accent-light);
         color: var(--accent);
     }

     .editable:hover::after {
         content: ' ✎';
         font-size: 0.7rem;
         opacity: 0.6;
     }

     .inline-input {
         border: 2px solid var(--accent);
         border-radius: 6px;
         padding: 3px 8px;
         font-size: 0.84rem;
         font-family: inherit;
         font-weight: 600;
         color: var(--text);
         background: #fff;
         outline: none;
         width: 90px;
     }

     /* Actions */
     .actions-cell {
         display: flex;
         gap: 6px;
         align-items: center;
     }

     .icon-btn {
         width: 30px;
         height: 30px;
         border-radius: 8px;
         border: none;
         background: transparent;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--text-muted);
         transition: all 0.15s;
         font-size: 1rem;
     }

     .icon-btn:hover {
         background: var(--accent-light);
         color: var(--accent);
     }

     .icon-btn.danger:hover {
         background: #fee2e2;
         color: var(--danger);
     }

     /* Checkbox */
     .cb {
         width: 17px;
         height: 17px;
         accent-color: var(--accent);
         cursor: pointer;
     }

     /* ── GRID VIEW ── */
     .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px;
     }

     .grid-card {
         background: var(--card-bg);
         border-radius: 16px;
         border: 1px solid var(--border);
         overflow: hidden;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
         transition: transform 0.2s, box-shadow 0.2s;
         cursor: pointer;
     }

     .grid-card:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 24px rgba(79, 110, 247, 0.12);
     }

     .grid-img-wrap {
         position: relative;
         height: 200px;
         /* DE 160px PARA 200px */
         overflow: hidden;
         background: #ffffff;
     }

     .grid-img-wrap img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         /* contain em vez de cover — não corta a imagem */
         padding: 10px;
         /* respiro nas bordas */
         background: #ffffff;
     }

     .grid-cb {
         position: absolute;
         top: 10px;
         left: 10px;
         width: 18px;
         height: 18px;
         accent-color: var(--accent);
         cursor: pointer;
         z-index: 2;
     }

     .grid-tag {
         position: absolute;
         top: 10px;
         right: 10px;
         background: rgba(255, 255, 255, 0.92);
         color: var(--accent);
         font-size: 0.68rem;
         font-weight: 700;
         padding: 3px 9px;
         border-radius: 20px;
         backdrop-filter: blur(4px);
     }

     .grid-body {
         padding: 14px;
     }

     .grid-name {
         font-weight: 700;
         font-size: 0.88rem;
         color: var(--text);
         margin-bottom: 2px;
     }

     .grid-sku {
         font-size: 0.72rem;
         color: var(--text-muted);
         margin-bottom: 10px;
     }

     .grid-stats {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
     }

     .grid-stat {
         background: #f8fafc;
         border-radius: 8px;
         padding: 6px 10px;
     }

     .grid-stat-label {
         font-size: 0.65rem;
         color: var(--text-muted);
         font-weight: 600;
         text-transform: uppercase;
     }

     .grid-stat-value {
         font-size: 0.88rem;
         font-weight: 700;
         color: var(--text);
         margin-top: 1px;
     }

     .grid-footer {
         padding: 10px 14px;
         border-top: 1px solid #f1f5f9;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     /* ── MODAL ── */
     .modal-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(15, 23, 42, 0.45);
         z-index: 1000;
         align-items: center;
         justify-content: center;
         backdrop-filter: blur(2px);
     }

     .modal-overlay.open {
         display: flex;
     }

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

     .modal-detalhes {
         max-width: 520px;
         overflow: hidden;
     }

     .det-section {
         border: 1px solid var(--border);
         border-radius: 12px;
         overflow: hidden;
     }

     .det-section-title {
         display: flex;
         align-items: center;
         gap: 8px;
         font-weight: 700;
         font-size: 0.8rem;
         text-transform: uppercase;
         letter-spacing: .06em;
         padding: 10px 16px;
         background: var(--bg);
         border-bottom: 1px solid var(--border);
         color: var(--text);
     }

     .det-section-body {
         padding: 12px 16px;
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .det-info-row {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
     }

     .det-info-label {
         font-size: 0.83rem;
         color: var(--text-muted);
         font-weight: 500;
         padding-top: 2px;
     }

     .det-info-value {
         font-size: 0.85rem;
         font-weight: 700;
     }

     .det-input {
         width: 100px;
         text-align: center;
         padding: 6px 10px;
         border-radius: 8px;
         border: 1px solid var(--border);
         font-size: 0.85rem;
         background: var(--surface);
         color: var(--text);
         transition: border-color .15s;
     }

     .det-input:focus {
         outline: none;
         border-color: var(--accent);
     }

     /* Histórico */
     .hist-item {
         display: flex;
         align-items: flex-start;
         gap: 10px;
         padding: 8px 0;
         border-bottom: 1px solid var(--border);
         font-size: 0.82rem;
     }

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

     .hist-data {
         color: var(--text-muted);
         font-size: 0.75rem;
         white-space: nowrap;
     }

     .modal {
         background: var(--card-bg);
         border-radius: 20px;
         width: 520px;
         max-width: 95vw;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
         animation: modalIn 0.25s ease;
     }

     @keyframes modalIn {
         from {
             transform: translateY(20px);
             opacity: 0;
         }

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

     .modal-overlay.active {
         display: flex;
     }

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

     .modal-title {
         font-size: 1.05rem;
         font-weight: 800;
         color: var(--primary);
     }

     .modal-close {
         width: 32px;
         height: 32px;
         border-radius: 8px;
         border: none;
         background: #f1f5f9;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--text-muted);
         font-size: 1.1rem;
         transition: all 0.15s;
     }

     .modal-close:hover {
         background: #fee2e2;
         color: var(--danger);
     }

     .modal-body {
         padding: 20px 24px;
     }

     .modal-product-info {
         display: flex;
         align-items: center;
         gap: 14px;
         background: #f8fafc;
         border-radius: 12px;
         padding: 14px;
         margin-bottom: 20px;
     }

     .modal-product-info img {
         width: 52px;
         height: 52px;
         border-radius: 10px;
         object-fit: cover;
         background: #e2e8f0;
     }

     .form-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px;
     }

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

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

     .form-label {
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--text-muted);
         text-transform: uppercase;
         letter-spacing: 0.4px;
     }

     .form-input,
     .form-select {
         padding: 9px 12px;
         border: 1.5px solid var(--border);
         border-radius: 10px;
         font-size: 0.85rem;
         font-family: inherit;
         color: var(--text);
         background: #fff;
         outline: none;
         transition: border 0.2s;
     }

     .form-input:focus,
     .form-select:focus {
         border-color: var(--accent);
     }

     .modal-footer {
         padding: 16px 24px;
         border-top: 1px solid var(--border);
         display: flex;
         justify-content: flex-end;
         gap: 10px;
     }

     /* ── TOAST ── */
     .toast {
         position: fixed;
         bottom: 24px;
         right: 24px;
         background: var(--primary);
         color: #fff;
         padding: 12px 18px;
         border-radius: 12px;
         font-size: 0.82rem;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 8px;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
         z-index: 9999;
         transform: translateY(80px);
         opacity: 0;
         transition: all 0.3s ease;
     }

     .toast.show {
         transform: translateY(0);
         opacity: 1;
     }

     .toast.success {
         background: #065f46;
     }

     .toast.error {
         background: #991b1b;
     }

     /* ── PAGINATION ── */
     .pagination {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-top: 20px;
         flex-wrap: wrap;
         gap: 10px;
     }

     .pagination-info {
         font-size: 0.8rem;
         color: var(--text-muted);
     }

     .pagination-btns {
         display: flex;
         align-items: center;
         gap: 6px;
     }

     .page-btn {
         width: 34px;
         height: 34px;
         border-radius: 8px;
         border: 1.5px solid var(--border);
         background: var(--card-bg);
         font-size: 0.82rem;
         font-weight: 600;
         font-family: inherit;
         color: var(--text-muted);
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.15s;
     }

     .page-btn:hover:not(:disabled) {
         border-color: var(--accent);
         color: var(--accent);
     }

     .page-btn.active {
         background: var(--accent);
         color: #fff;
         border-color: var(--accent);
     }

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

     .page-btn span {
         font-size: 1rem;
     }

     /* ── BULK BAR ── */
     .bulk-bar {
         display: none;
         align-items: center;
         gap: 12px;
         background: var(--primary);
         color: #fff;
         padding: 10px 18px;
         border-radius: 12px;
         margin-bottom: 14px;
         font-size: 0.83rem;
         font-weight: 600;
     }

     .bulk-bar.visible {
         display: flex;
     }

     .bulk-bar-actions {
         display: flex;
         gap: 8px;
         margin-left: auto;
     }

     .bulk-btn {
         padding: 5px 14px;
         border-radius: 8px;
         border: 1.5px solid rgba(255, 255, 255, 0.3);
         background: transparent;
         color: #fff;
         font-size: 0.78rem;
         font-weight: 600;
         font-family: inherit;
         cursor: pointer;
         transition: all 0.15s;
     }

     .bulk-btn:hover {
         background: rgba(255, 255, 255, 0.15);
     }

     .bulk-btn.danger:hover {
         background: var(--danger);
         border-color: var(--danger);
     }





     .grid-img-wrap img:hover {
         opacity: 0.8;
     }

     .grid-img-wrap::after {
         content: '📷';
         position: absolute;
         bottom: 8px;
         right: 8px;
         background: rgba(0, 0, 0, 0.5);
         color: white;
         padding: 4px 8px;
         border-radius: 6px;
         font-size: 0.75rem;
         opacity: 0;
         transition: opacity 0.2s;
     }

     .grid-img-wrap:hover::after {
         opacity: 1;
     }

     .search-wrap {
         position: relative;
     }


     /* ── Sugestão── */
     .search-suggestions {
         position: absolute;
         top: calc(100% + 6px);
         left: 0;
         width: 100%;
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 10px;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
         z-index: 999;
         max-height: 260px;
         overflow-y: auto;
         display: none;
     }

     .search-suggestion-item {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 9px 14px;
         cursor: pointer;
         font-size: 0.83rem;
         transition: background 0.15s;
     }

     .search-suggestion-item:hover {
         background: var(--accent-light);
     }

     .search-suggestion-item img {
         width: 32px;
         height: 32px;
         border-radius: 6px;
         object-fit: contain;
         background: #f8fafc;
         flex-shrink: 0;
     }

     .search-suggestion-name {
         font-weight: 600;
         color: var(--text);
     }

     .search-suggestion-sku {
         font-size: 0.72rem;
         color: var(--text-muted);
     }


     /* hidden */
     .hidden {
         display: none !important;
     }

     @media (max-width: 1100px) {
         .grid-container {
             grid-template-columns: repeat(3, 1fr);
         }
     }

     @media (max-width: 768px) {
         .grid-container {
             grid-template-columns: repeat(2, 1fr);
         }
     }

     @media (max-width: 480px) {
         .grid-container {
             grid-template-columns: 1fr;
         }
     }

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

     /* Chip robô */
     .filter-chip-robo {
         position: relative;
         display: inline-flex !important;
         align-items: center;
         gap: 5px;
     }

     .robo-badge {
         position: absolute;
         top: -6px;
         right: -6px;
         background: #ef4444;
         color: white;
         font-size: 0.68rem;
         font-weight: 700;
         padding: 2px 6px;
         border-radius: 10px;
         line-height: 1.4;
         min-width: 18px;
         text-align: center;
     }

     /* Header robô */
     .robo-header {
         padding: 0;
         margin-bottom: 0;
         border: none;
         background: transparent;
     }

     .robo-header-left {
         display: flex;
         align-items: center;
         gap: 14px;
     }

     .robo-icon-header {
         font-size: 2rem;
         color: var(--accent);
         background: var(--accent-light, #eef2ff);
         padding: 10px;
         border-radius: 12px;
     }

     .robo-header-title {
         font-weight: 700;
         font-size: 0.95rem;
     }

     .robo-header-sub {
         font-size: 0.78rem;
         color: var(--text-muted);
         margin-top: 2px;
     }

     .btn-ver-log {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 8px 16px;
         border-radius: 8px;
         border: 1px solid var(--border);
         font-size: 0.82rem;
         font-weight: 600;
         color: var(--text);
         text-decoration: none;
         background: var(--surface);
         transition: background .15s;
     }

     .btn-ver-log:hover {
         background: var(--bg);
     }

     .btn-acao-lote {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 8px 16px;
         border-radius: 8px;
         border: none;
         background: var(--accent);
         color: white;
         font-size: 0.82rem;
         font-weight: 600;
         cursor: pointer;
         transition: opacity .15s;
     }

     .btn-acao-lote:hover {
         opacity: .9;
     }

     /* Toggle switch */
     .toggle-switch {
         position: relative;
         display: inline-block;
         width: 36px;
         height: 20px;
         flex-shrink: 0;
     }

     .toggle-switch input {
         opacity: 0;
         width: 0;
         height: 0;
     }

     .toggle-slider {
         position: absolute;
         inset: 0;
         background: #cbd5e1;
         border-radius: 20px;
         cursor: pointer;
         transition: .2s;
     }

     .toggle-slider:before {
         content: '';
         position: absolute;
         width: 14px;
         height: 14px;
         left: 3px;
         top: 3px;
         background: white;
         border-radius: 50%;
         transition: .2s;
     }

     .toggle-switch input:checked+.toggle-slider {
         background: var(--accent, #6366f1);
     }

     .toggle-switch input:checked+.toggle-slider:before {
         transform: translateX(16px);
     }

     /* Input limite inline */
     .input-limite {
         width: 58px;
         text-align: center;
         padding: 5px 6px;
         border-radius: 7px;
         border: 1px solid var(--border);
         font-size: 0.82rem;
         background: var(--bg);
         color: var(--text);
     }

     .input-limite:focus {
         outline: none;
         border-color: var(--accent);
     }

     /* Botão reativar */
     .btn-reativar {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         padding: 6px 12px;
         border-radius: 8px;
         border: none;
         background: var(--accent-light, #eef2ff);
         color: var(--accent);
         font-size: 0.8rem;
         font-weight: 600;
         cursor: pointer;
         transition: all .15s;
     }

     .btn-reativar:hover {
         background: var(--accent);
         color: white;
     }

     .badge-low {
         background: #fef3c7;
         color: #92400e;
         padding: 2px 8px;
         border-radius: 10px;
         font-size: 0.72rem;
         font-weight: 600;
     }

     .badge-out {
         background: #fee2e2;
         color: #991b1b;
         padding: 2px 8px;
         border-radius: 10px;
         font-size: 0.72rem;
         font-weight: 600;
     }

     /* Grid robô */
     .robo-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px;
     }

     .robo-card {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 14px;
         padding: 16px;
         display: flex;
         flex-direction: column;
         gap: 12px;
         cursor: pointer;
         transition: box-shadow .15s;
     }

     .robo-card:hover {
         box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
     }

     .robo-card.selected {
         border-color: var(--accent);
         background: var(--accent-light, #eef2ff);
     }

     .robo-card-top {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .robo-card-img {
         width: 52px;
         height: 52px;
         border-radius: 10px;
         object-fit: contain;
         background: var(--bg);
         border: 1px solid var(--border);
         flex-shrink: 0;
     }

     .robo-card-nome {
         font-weight: 700;
         font-size: 0.85rem;
         line-height: 1.3;
     }

     .robo-card-sku {
         font-size: 0.73rem;
         color: var(--text-muted);
         margin-top: 2px;
     }

     .robo-card-divider {
         border: none;
         border-top: 1px solid var(--border);
         margin: 0;
     }

     .robo-card-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         font-size: 0.82rem;
     }

     .robo-card-label {
         color: var(--text-muted);
         font-weight: 500;
     }

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

     .robo-empty .material-symbols-rounded {
         font-size: 3rem;
         color: #10b981;
         display: block;
         margin-bottom: 10px;
     }

     .robo-empty p {
         font-weight: 600;
         font-size: 0.95rem;
         margin-bottom: 4px;
     }

     /* Modal detalhes */
     .modal-detalhes {
         max-width: 560px;
     }

     .det-section {
         border: 1px solid var(--border);
         border-radius: 12px;
         padding: 16px 18px;
         margin-bottom: 14px;
     }

     .det-section-title {
         display: flex;
         align-items: center;
         gap: 7px;
         font-weight: 700;
         font-size: 0.85rem;
         margin-bottom: 14px;
         color: var(--text);
     }

     .det-section-title .material-symbols-rounded {
         font-size: 1.1rem;
         color: var(--accent);
     }

     .det-row {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         flex-wrap: wrap;
     }

     .det-label {
         font-size: 0.83rem;
         color: var(--text-muted);
         font-weight: 500;
         padding-top: 8px;
     }

     .det-alerta {
         background: #fef3c7;
         color: #92400e;
         padding: 3px 10px;
         border-radius: 8px;
         font-size: 0.75rem;
         font-weight: 600;
     }

     .det-radio-label {
         display: flex;
         align-items: flex-start;
         gap: 10px;
         padding: 10px 14px;
         border-radius: 10px;
         border: 1px solid var(--border);
         cursor: pointer;
         transition: border-color .15s;
         background: var(--bg);
     }

     .det-radio-label:has(input:checked) {
         border-color: var(--accent);
         background: var(--accent-light, #eef2ff);
     }

     .det-radio-label input {
         margin-top: 3px;
         accent-color: var(--accent);
     }

     .btn-sync {
         display: flex;
         align-items: center;
         gap: 7px;
         margin-top: 14px;
         padding: 9px 18px;
         border-radius: 9px;
         border: none;
         background: var(--accent);
         color: white;
         font-size: 0.85rem;
         font-weight: 600;
         cursor: pointer;
         transition: opacity .15s;
     }

     .btn-sync:hover {
         opacity: .9;
     }

     .btn-sync:disabled {
         opacity: .5;
         cursor: not-allowed;
     }

     /* Histórico */
     .hist-item {
         display: flex;
         align-items: flex-start;
         gap: 10px;
         padding: 8px 0;
         border-bottom: 1px solid var(--border);
         font-size: 0.82rem;
     }

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

     .hist-icon {
         font-size: 1rem;
         flex-shrink: 0;
         margin-top: 1px;
     }

     .hist-data {
         color: var(--text-muted);
         font-size: 0.75rem;
         white-space: nowrap;
     }

     /* Linha clicável na tabela */
     .robo-row {
         cursor: pointer;
     }

     .robo-row:hover td {
         background: var(--accent-light, #eef2ff) !important;
     }

     .robo-row.selected td {
         background: var(--accent-light, #eef2ff) !important;
     }