* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #1a1a1a);
    max-width: 100vw;
    overflow-x: hidden;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--tg-theme-hint-color, #ccc);
}
.header h1 { font-size: 20px; flex: 1; text-align: center; }
.back-btn, .cart-btn {
    background: none; border: none; font-size: 22px;
    cursor: pointer; padding: 4px 10px; border-radius: 8px;
    color: var(--tg-theme-button-color, #2481cc);
}
.cart-btn { position: relative; }
#cartCount {
    background: var(--tg-theme-button-color, #2481cc);
    color: #fff; font-size: 12px; font-weight: bold;
    padding: 1px 6px; border-radius: 10px;
    position: absolute; top: -4px; right: -4px;
}

/* Categories */
.categories {
    display: flex; gap: 8px; padding: 12px 16px;
    overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.categories::-webkit-scrollbar { display: none; }
.cat-tab {
    padding: 8px 18px; border-radius: 20px; border: 1px solid var(--tg-theme-hint-color, #ccc);
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #1a1a1a);
    cursor: pointer; font-size: 14px; font-weight: 500;
    flex-shrink: 0; transition: all 0.2s;
}
.cat-tab.active {
    background: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #fff);
    border-color: var(--tg-theme-button-color, #2481cc);
}

/* Products */
.products {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; padding: 0 16px 80px;
}
.product-card {
    background: var(--tg-theme-secondary-bg-color, #f7f7f7);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform 0.15s;
    display: flex; flex-direction: column;
}
.product-card:active { transform: scale(0.97); }
.product-card img {
    width: 100%; height: 160px; object-fit: cover;
    background: #e0e0e0;
}
.product-card .info { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; }
.product-card .name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.product-card .price { font-size: 16px; font-weight: 700; color: var(--tg-theme-button-color, #2481cc); margin-bottom: 8px; }
.product-card .buy-btn {
    margin-top: auto; padding: 8px; border: none; border-radius: 10px;
    background: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Overlays */
.overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 100;
    display: flex; align-items: flex-end; justify-content: center;
}
.cart-panel, .checkout-panel, .qty-panel, .success-panel {
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    width: 100%; max-width: 500px; max-height: 90vh;
    border-radius: 20px 20px 0 0; padding: 20px 16px 30px;
    overflow-y: auto;
}
.success-panel {
    text-align: center; padding: 40px 20px;
    align-items: center; display: flex; flex-direction: column; gap: 12px;
}

/* Buttons */
.btn-primary {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    background: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 12px;
}
.btn-secondary {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    background: transparent; color: var(--tg-theme-button-color, #2481cc);
    font-size: 16px; cursor: pointer; margin-top: 8px;
}

/* Cart item */
.cart-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--tg-theme-hint-color, #ddd);
}
.cart-item-img {
    width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #e0e0e0;
}
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; font-size: 14px; }
.cart-item-price { color: var(--tg-theme-button-color, #2481cc); font-weight: 600; }
.cart-item-qty {
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.cart-item-qty button {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tg-theme-hint-color, #ccc);
    background: var(--tg-theme-bg-color, #fff); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cart-remove { cursor: pointer; font-size: 20px; padding: 4px; }
.cart-total { font-size: 18px; font-weight: 700; padding: 16px 0; text-align: right; }

/* Quantity selector */
.qty-controls {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    margin: 20px 0; font-size: 28px; font-weight: 700;
}
.qty-controls button {
    width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid var(--tg-theme-button-color, #2481cc);
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-button-color, #2481cc);
    font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.qty-price { text-align: center; font-size: 18px; color: var(--tg-theme-hint-color, #888); }

/* Forms */
form label { display: block; font-weight: 600; margin-top: 12px; font-size: 14px; }
form input, form select {
    width: 100%; padding: 12px; border-radius: 10px;
    border: 1px solid var(--tg-theme-hint-color, #ccc);
    font-size: 15px; margin-top: 4px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #1a1a1a);
}
.checkout-summary { margin-top: 16px; padding: 12px; background: var(--tg-theme-bg-color, #fff); border-radius: 10px; }

/* Admin styles: loaded only in admin.html */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px; background: var(--tg-theme-secondary-bg-color, #1a1a2e);
    padding: 20px 0; color: #fff;
}
.admin-sidebar a {
    display: block; padding: 12px 24px; color: #ccc; text-decoration: none;
    font-size: 15px; cursor: pointer; transition: 0.2s;
}
.admin-sidebar a:hover, .admin-sidebar a.active { color: #fff; background: rgba(255,255,255,0.1); }
.admin-content { flex: 1; padding: 24px; overflow-y: auto; }
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e0e0e0; font-size: 14px; }
.admin-table th { background: var(--tg-theme-secondary-bg-color, #f5f5f5); font-weight: 600; }
.status-badge {
    padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
    display: inline-block;
}
.status-new { background: #ffd700; color: #333; }
.status-processing { background: #87ceeb; color: #333; }
.status-shipped { background: #90ee90; color: #333; }
.status-delivered { background: #2ecc71; color: #fff; }
.status-cancelled { background: #e74c3c; color: #fff; }
.admin-form { max-width: 500px; }
.admin-form label { display: block; margin-top: 12px; font-weight: 600; }
.admin-form input, .admin-form select, .admin-form textarea {
    width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ccc; margin-top: 4px; font-size: 14px;
}
.admin-form textarea { resize: vertical; min-height: 60px; }
.btn-save {
    padding: 12px 24px; border: none; border-radius: 10px;
    background: var(--tg-theme-button-color, #2481cc);
    color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px;
}
.btn-danger {
    padding: 8px 16px; border: none; border-radius: 8px;
    background: #e74c3c; color: #fff; font-size: 13px; cursor: pointer;
}
.btn-sm {
    padding: 6px 12px; border: none; border-radius: 6px;
    background: var(--tg-theme-button-color, #2481cc);
    color: #fff; font-size: 13px; cursor: pointer; margin-right: 4px;
}
.product-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; background: #e0e0e0; }
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal-panel {
    background: #fff; border-radius: 16px; padding: 24px; min-width: 400px; max-width: 600px;
    max-height: 80vh; overflow-y: auto;
}
.modal-panel h3 { margin-bottom: 16px; }