:root {
    --primary: #0d9488;
    --primary-dark: #0f766e;
    --primary-light: #99f6e4;
    --primary-lighter: #f0fdfa;
    --primary-glow: rgba(13,148,136,.15);
    --accent: #6366f1;
    --accent-light: #e0e7ff;
    --success: #16a34a;
    --success-light: #dcfce7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --orange: #ea580c;
    --orange-light: #fff7ed;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Inter',-apple-system,sans-serif;
    background:var(--gray-100);
    color:var(--gray-800);
    line-height:1.5;
    height:100vh;
    overflow:hidden;
}

/* ===== LAYOUT ===== */
.app { display:flex; flex-direction:column; height:100vh; }

.topbar {
    background:linear-gradient(135deg, #1e293b 0%, #0f766e 60%, #2488d4 100%);
    color:white; padding:0 1.5rem; height:56px;
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0; z-index:50;
}
.topbar-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; }
.topbar-brand svg { width:26px; height:26px; }
.topbar-nav { display:flex; gap:.25rem; }
.topbar-nav button {
    background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.7);
    padding:.45rem .9rem; border-radius:var(--radius-sm);
    font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:.35rem;
}
.topbar-nav button:hover { background:rgba(255,255,255,.2); color:white; }
.topbar-nav button.active { background:rgba(255,255,255,.25); color:white; }
.topbar-nav button svg { width:16px; height:16px; }
.topbar-info { display:flex; align-items:center; gap:1rem; font-size:.82rem; opacity:.85; }
.topbar-info .clock { font-weight:600; font-variant-numeric:tabular-nums; }

.main-content { flex:1; overflow:hidden; position:relative; }

.view { display:none; height:100%; }
.view.active { display:flex; }

/* ===== POS VIEW ===== */
.pos-view { display:flex; flex-direction:row; height:100%; background:var(--gray-50); }

.pos-left {
    flex:1; display:flex; flex-direction:column; padding:1.25rem 1.5rem; overflow:hidden;
}

.pos-search-wrapper {
    position:relative; z-index:101; flex-shrink:0;
}
.search-box {
    flex:1; display:flex; align-items:center; gap:.5rem;
    background:white; border:1.5px solid var(--gray-200); border-radius:var(--radius); padding:0 .75rem; transition:all .2s;
    box-shadow:var(--shadow);
}
.search-box:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); background:white; }
.search-box svg { width:18px; height:18px; color:var(--gray-400); flex-shrink:0; }
.search-box input {
    flex:1; border:none; background:transparent; padding:.55rem 0;
    font-family:inherit; font-size:.88rem; color:var(--gray-800); outline:none;
}
.search-box input::placeholder { color:var(--gray-400); }

.category-tabs {
    display:flex; gap:.35rem; padding:.75rem 1.25rem; background:white;
    border-bottom:1px solid var(--gray-200); overflow-x:auto; flex-shrink:0;
}
.category-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
    padding:.4rem .85rem; border:1.5px solid var(--gray-200); border-radius:20px;
    background:white; font-family:inherit; font-size:.78rem; font-weight:600;
    color:var(--gray-500); cursor:pointer; transition:all .15s; white-space:nowrap;
    display:flex; align-items:center; gap:.3rem;
}
.cat-tab:hover { border-color:var(--primary); color:var(--primary); }
.cat-tab.active { background:var(--primary); color:white; border-color:var(--primary); }

.catalog-grid {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:100;
    background:white; border:1.5px solid var(--gray-200); border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    max-height:400px; overflow-y:auto;
    box-shadow:0 12px 36px rgba(0,0,0,.12);
}
.catalog-grid.open { display:block; }
.catalog-grid::-webkit-scrollbar { width:6px; }
.catalog-grid::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }

.product-card {
    padding:.6rem 1rem; cursor:pointer; transition:all .15s;
    display:flex; flex-direction:row; align-items:center; gap:.65rem;
    border-bottom:1px solid var(--gray-100);
}
.product-card:last-child { border-bottom:none; }
.product-card:hover { background:var(--primary-lighter); }
.product-card:active { transform:translateY(0); }
.product-card .pc-icon {
    width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.product-card .pc-info { flex:1; min-width:0; }
.product-card .pc-cat { font-size:.62rem; font-weight:600; color:var(--gray-400); text-transform:uppercase; }
.product-card .pc-name { font-size:.82rem; font-weight:600; color:var(--gray-700); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-card .pc-bottom { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:.1rem; }
.product-card .pc-price { font-size:.85rem; font-weight:800; color:var(--primary); }
.product-card .pc-stock { font-size:.62rem; font-weight:700; padding:.1rem .35rem; border-radius:6px; }
.stock-ok { background:var(--success-light); color:var(--success); }
.stock-low { background:var(--warning-light); color:var(--warning); }
.stock-out { background:var(--danger-light); color:var(--danger); }
.product-card.out-of-stock { opacity:.5; cursor:not-allowed; }
.product-card.out-of-stock:hover { background:transparent; }

/* ===== CART ===== */
.pos-cart {
    width:440px; background:white;
    display:flex; flex-direction:column;
    flex-shrink:0; overflow:hidden;
    box-shadow:2px 0 12px rgba(0,0,0,.06);
    border-right:1px solid var(--gray-200);
}
.client-name-bar {
    padding:.6rem 1.25rem; border-bottom:1px solid var(--gray-200);
    display:flex; align-items:center; gap:.5rem;
    font-size:.85rem; font-weight:600; color:var(--gray-600);
}
.cart-header {
    padding:1rem 1.25rem; border-bottom:1px solid var(--gray-200);
    display:flex; align-items:center; justify-content:space-between;
}
.cart-header h3 { font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:.4rem; }
.cart-header h3 svg { width:18px; height:18px; color:var(--primary); }
.cart-badge { background:var(--primary); color:white; font-size:.7rem; font-weight:800; padding:.15rem .5rem; border-radius:10px; margin-left:.3rem; }

.client-selector {
    padding:.75rem 1.25rem; border-bottom:1px solid var(--gray-100);
    display:flex; align-items:center; gap:.5rem;
}
.client-search-input {
    flex:1; padding:.45rem .6rem; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
    font-family:inherit; font-size:.82rem; color:var(--gray-700); background:var(--gray-50); cursor:text;
}
.client-search-input:focus { outline:none; border-color:var(--primary); }
.client-search-input::placeholder { color:var(--gray-400); }
.client-dropdown {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:999;
    background:white; border:1.5px solid var(--gray-200); border-top:none;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    max-height:200px; overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.client-dropdown.open { display:block; }
.client-dropdown-item {
    padding:.5rem .75rem; font-size:.82rem; cursor:pointer;
    color:var(--gray-700); transition:background .1s;
}
.client-dropdown-item:hover { background:var(--primary); color:white; }
.client-dropdown-item.general { color:var(--gray-400); font-style:italic; }
.client-dropdown-item.general:hover { background:var(--primary); color:white; }
.client-info-panel {
    padding:1rem 1.25rem; border-bottom:1px solid var(--gray-200);
    background:var(--primary-lighter);
    animation:slideDown .25s ease;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.client-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .75rem; }
.client-info-field {
    background:white; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
    padding:.45rem .65rem; overflow:hidden;
}
.cif-label {
    font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--gray-400); margin-bottom:.15rem;
}
.cif-value {
    font-size:.82rem; font-weight:600; color:var(--gray-700);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.client-fiscal-row { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.6rem; }
.client-fiscal-field { display:flex; flex-direction:column; }
.cif-select {
    width:100%; padding:.35rem .5rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
    font-family:inherit; font-size:.78rem; font-weight:600; color:var(--gray-700);
    background:white; cursor:pointer; margin-top:.15rem;
}
.cif-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.client-info-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.client-info-name { font-size:.95rem; font-weight:700; color:var(--gray-800); }
.client-info-close {
    background:none; border:none; cursor:pointer; color:var(--gray-400);
    padding:2px; line-height:0; border-radius:4px;
}
.client-info-close:hover { color:var(--danger); background:var(--danger-light); }
.cfdi-check-label {
    display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600;
    color:var(--gray-600); cursor:pointer; user-select:none;
}
.cfdi-check-label input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.client-info-badge {
    display:inline-flex; align-items:center; gap:.25rem; font-size:.65rem; font-weight:700;
    padding:.15rem .45rem; border-radius:10px; margin-left:.4rem;
}
.client-info-badge.factura { background:#dbeafe; color:#2563eb; }

.btn-icon {
    width:32px; height:32px; border-radius:var(--radius-sm);
    border:1.5px solid var(--gray-200); background:white;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .15s; color:var(--gray-500);
}
.btn-icon:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-lighter); }
.btn-icon svg { width:16px; height:16px; }

.cart-items { flex:1; overflow-y:auto; padding:.5rem 0; }
.cart-items::-webkit-scrollbar { width:4px; }
.cart-items::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:2px; }

.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--gray-400); gap:.5rem; padding:2rem; }
.cart-empty svg { width:48px; height:48px; opacity:.3; }
.cart-empty p { font-size:.85rem; font-weight:500; }

.cart-item { display:flex; align-items:center; gap:.6rem; padding:.6rem 1.25rem; transition:background .1s; }
.cart-item:hover { background:var(--gray-50); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-info .ci-name { font-size:.82rem; font-weight:600; color:var(--gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-info .ci-price { font-size:.75rem; color:var(--gray-400); }
.cart-item-qty { display:flex; align-items:center; gap:.3rem; }
.cart-item-qty button {
    width:26px; height:26px; border-radius:6px; border:1.5px solid var(--gray-200);
    background:white; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1rem; font-weight:700; color:var(--gray-500); transition:all .1s;
}
.cart-item-qty button:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-lighter); }
.cart-item-qty span { font-size:.85rem; font-weight:700; min-width:20px; text-align:center; }
.cart-item-total { font-size:.88rem; font-weight:700; color:var(--gray-800); min-width:65px; text-align:right; }
.cart-item-remove { background:none; border:none; color:var(--gray-300); cursor:pointer; padding:.2rem; transition:color .1s; display:flex; }
.cart-item-remove:hover { color:var(--danger); }
.cart-item-remove svg { width:14px; height:14px; }

.cart-totals { padding:1rem 1.25rem; border-top:1px solid var(--gray-200); background:var(--gray-50); }
.cart-total-row { display:flex; justify-content:space-between; font-size:.85rem; padding:.2rem 0; }
.cart-total-row span:first-child { color:var(--gray-500); }
.cart-total-row span:last-child { font-weight:600; }
.cart-total-row.grand { font-size:1.2rem; font-weight:800; padding:.6rem 0 .4rem; border-top:2px solid var(--primary); margin-top:.4rem; }
.cart-total-row.grand span:last-child { color:var(--primary); }
.discount-input { width:60px; padding:.2rem .4rem; border:1.5px solid var(--gray-200); border-radius:6px; font-family:inherit; font-size:.82rem; text-align:right; font-weight:600; }
.discount-input:focus { outline:none; border-color:var(--primary); }

.cart-actions { padding:.75rem 1.25rem 1rem; display:flex; gap:.5rem; }
.cart-actions .btn { flex:1; }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.6rem 1rem; border:none; border-radius:var(--radius);
    font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn svg { width:18px; height:18px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); }
.btn-success { background:var(--success); color:white; }
.btn-success:hover:not(:disabled) { background:#15803d; }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover:not(:disabled) { background:#b91c1c; }
.btn-white { background:white; color:var(--gray-600); border:1.5px solid var(--gray-200); }
.btn-white:hover:not(:disabled) { border-color:var(--gray-300); background:var(--gray-50); }
.btn-accent { background:var(--accent); color:white; }
.btn-accent:hover:not(:disabled) { background:#4f46e5; }
.btn-lg { padding:.8rem 1.5rem; font-size:.95rem; }
.btn-sm { padding:.35rem .7rem; font-size:.78rem; }
.btn-block { width:100%; }
.btn-ghost { background:transparent; color:var(--gray-400); padding:.3rem; border-radius:var(--radius-sm); }
.btn-ghost:hover { color:var(--danger); background:var(--danger-light); }

/* ===== LIST VIEWS ===== */
.list-view { flex-direction:column; overflow:hidden; }
.list-toolbar {
    padding:1rem 1.5rem; background:white; border-bottom:1px solid var(--gray-200);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-shrink:0;
}
.list-toolbar h2 { font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.list-toolbar h2 svg { width:22px; height:22px; color:var(--primary); }
.list-body { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }

.data-table { width:100%; border-collapse:collapse; background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-200); }
.data-table thead th {
    background:var(--gray-50); padding:.65rem 1rem; font-size:.72rem; font-weight:700;
    color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; text-align:left;
    border-bottom:2px solid var(--gray-200); position:sticky; top:0; z-index:1;
}
.data-table tbody td { padding:.65rem 1rem; font-size:.85rem; border-bottom:1px solid var(--gray-100); }
.data-table tbody tr:hover { background:var(--gray-50); }
.data-table .actions-cell { display:flex; gap:.25rem; }

.tag { display:inline-flex; padding:.15rem .5rem; border-radius:10px; font-size:.72rem; font-weight:700; }
.tag-blue { background:var(--primary-lighter); color:var(--primary); }
.tag-green { background:var(--success-light); color:var(--success); }
.tag-orange { background:var(--orange-light); color:var(--orange); }
.tag-red { background:var(--danger-light); color:var(--danger); }

/* ===== MODAL ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    z-index:200; display:none; align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal {
    background:white; border-radius:16px; width:95%; max-width:520px;
    max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:modalSlide .2s ease;
}
.modal.modal-lg { max-width:650px; }
@keyframes modalSlide { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-head { padding:1.25rem 1.5rem; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-size:1.05rem; font-weight:700; }
.modal-body { padding:1.5rem; }
.modal-foot { padding:1rem 1.5rem; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:.5rem; }

.form-group { margin-bottom:.9rem; }
.form-group label { display:block; font-size:.75rem; font-weight:700; color:var(--gray-600); margin-bottom:.3rem; text-transform:uppercase; letter-spacing:.04em; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:.55rem .75rem; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
    font-family:inherit; font-size:.88rem; color:var(--gray-800); background:var(--gray-50); transition:all .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); background:white; }
.form-row { display:grid; gap:.75rem; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }

/* Payment */
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1.25rem; }
.pay-method {
    border:2px solid var(--gray-200); border-radius:var(--radius); padding:.9rem .75rem;
    text-align:center; cursor:pointer; transition:all .15s; background:white;
}
.pay-method:hover { border-color:var(--primary); }
.pay-method.selected { border-color:var(--primary); background:var(--primary-lighter); }
.pay-method .pm-icon { font-size:1.5rem; margin-bottom:.2rem; }
.pay-method .pm-label { font-size:.82rem; font-weight:600; color:var(--gray-700); }

.pay-summary { background:var(--gray-50); border-radius:var(--radius); padding:1.25rem; border:1.5px solid var(--gray-200); margin-bottom:1rem; }
.pay-summary .ps-row { display:flex; justify-content:space-between; padding:.25rem 0; font-size:.9rem; }
.pay-summary .ps-row span:first-child { color:var(--gray-500); }
.pay-summary .ps-row span:last-child { font-weight:600; }
.pay-summary .ps-total { border-top:2px solid var(--primary); margin-top:.5rem; padding-top:.6rem; font-size:1.3rem; font-weight:800; }
.pay-summary .ps-total span:last-child { color:var(--primary); }

.change-display {
    background:var(--success-light); border:2px solid var(--success); border-radius:var(--radius);
    padding:.75rem 1rem; text-align:center; font-size:1rem; font-weight:700; color:var(--success); margin-top:.75rem;
}

/* Receipt */
.receipt-preview {
    background:white; border:1.5px dashed var(--gray-300); border-radius:var(--radius);
    padding:2rem 1.5rem; font-family:'Courier New',monospace; font-size:.82rem; line-height:1.7; max-height:400px; overflow-y:auto;
}
.receipt-preview .r-center { text-align:center; }
.receipt-preview .r-bold { font-weight:700; }
.receipt-preview .r-line { border-top:1px dashed var(--gray-300); margin:.5rem 0; }
.receipt-preview .r-row { display:flex; justify-content:space-between; }
.receipt-preview .r-total { font-weight:700; font-size:1rem; }

/* Toast */
.toast {
    position:fixed; bottom:1.5rem; right:1.5rem;
    background:var(--gray-800); color:white; padding:.7rem 1.2rem; border-radius:var(--radius);
    font-size:.85rem; font-weight:500; box-shadow:var(--shadow-lg);
    transform:translateY(80px); opacity:0; transition:all .3s; z-index:500;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }

/* Stats */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
.stat-card { background:white; border:1px solid var(--gray-200); border-radius:var(--radius); padding:1.1rem 1.25rem; box-shadow:var(--shadow); }
.stat-card .stat-label { font-size:.72rem; font-weight:600; text-transform:uppercase; color:var(--gray-400); letter-spacing:.04em; }
.stat-card .stat-value { font-size:1.4rem; font-weight:800; color:var(--gray-800); margin-top:.2rem; }
.stat-card .stat-sub { font-size:.75rem; color:var(--gray-400); margin-top:.15rem; }

/* ===== PENDING ORDERS LIST ===== */
.pending-order-item {
    display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
    border-bottom:1px solid var(--gray-100); cursor:pointer; transition:all .15s;
}
.pending-order-item:last-child { border-bottom:none; }
.pending-order-item:hover { background:var(--primary-lighter); }
.po-main { flex:1; min-width:0; }
.po-id { font-size:.95rem; font-weight:800; color:var(--primary); }
.po-client { font-size:.8rem; color:var(--gray-500); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.po-details { display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; }
.po-items { font-size:.72rem; font-weight:600; color:var(--gray-400); }
.po-date { font-size:.72rem; color:var(--gray-400); }
.po-total { font-size:1.05rem; font-weight:800; color:var(--gray-800); min-width:80px; text-align:right; }

/* Print */
.print-area { display:none; }
@media print {
    body * { visibility:hidden; }
    .print-area,.print-area * { visibility:visible !important; }
    .print-area { display:block !important; position:absolute; left:0; top:0; width:80mm; padding:5mm; font-family:'Courier New',monospace; font-size:12px; line-height:1.6; color:#000; }
}

@media (max-width:900px) { .pos-cart{width:320px} .stats-row{grid-template-columns:1fr 1fr} }
@media (max-width:700px) {
    .pos-view{flex-direction:column} .pos-cart{width:100%;border-right:none;border-bottom:1px solid var(--gray-200)}
    .pos-left{padding:1rem}
    .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
    .stats-row{grid-template-columns:1fr}
}