.App{max-width:1200px;margin:auto;padding:20px;animation:fadeIn .6s ease-in-out}h2{text-align:center;font-size:38px;margin-bottom:8px;font-weight:700;letter-spacing:1px}.badge-container{display:flex;justify-content:center;margin-bottom:18px}.badge{background:#22c55e;padding:7px 18px;border-radius:20px;font-weight:700;font-size:15px;color:#fff}.search-section{display:flex;justify-content:center;margin-bottom:20px}.search-section input{width:65%;padding:12px 14px;border-radius:12px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fff;font-size:16px;transition:.3s}.search-section input:focus{outline:none;border-color:#4cc9f0;box-shadow:0 0 12px #4cc9f099}.sort-container{display:flex;justify-content:center;margin-bottom:25px}.sort-container select{padding:12px 14px;border-radius:12px;font-size:15px;border:1px solid rgba(255,255,255,.15);background:#ffffff14;color:gray;transition:.3s}.sort-container select:focus{border-color:#4cc9f0}.sort-container:hover{border-color:#0ff}.center-form{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:25px}.center-form input{padding:12px 14px;width:260px;border-radius:12px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:gray;font-size:15px;transition:.3s}.center-form input:focus{border-color:#4cc9f0;box-shadow:0 0 12px #4cc9f099}.add-btn,.update-btn{padding:12px 22px;border-radius:12px;background:#2563eb;color:#fff;font-weight:700;border:none;cursor:pointer;transition:.3s}.add-btn:hover,.update-btn:hover{background:#1e3aa1;transform:scale(1.05)}.table-modern{width:100%;border-collapse:collapse;background:#ffffff12;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0006;animation:slideUp .6s ease-in-out}.table-modern th,.table-modern td{padding:14px 12px;text-align:center;font-size:15px}.table-modern th{background:#ffffff26;font-weight:700;font-size:16px;color:#fff}.row-hover:hover{background:#ffffff26}.table-modern img{width:70px;height:70px;object-fit:contain;border-radius:10px}.edit-btn{background:#22c55e;border:none;padding:9px 15px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;margin-right:6px;transition:.3s}.edit-btn:hover{background:#178244}.delete-btn{background:#ef4444;border:none;padding:9px 15px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;transition:.3s}.delete-btn:hover{background:#b32626}.pagination-section{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}.pagination-section button{padding:10px 15px;border-radius:12px;font-weight:700;border:none;cursor:pointer;background:#2563eb;color:#fff;transition:.3s}.pagination-section button:hover{background:#1e3aa1}.theme-toggle{display:flex;justify-content:flex-end}.theme-toggle button{padding:10px 18px;border-radius:12px;background:#000;color:#fff;border:none;cursor:pointer;font-weight:600;transition:.3s}.theme-toggle button:hover{opacity:.7}.product-card{width:320px;padding:22px;border-radius:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 20px #00000073;text-align:center;cursor:pointer;transition:.35s ease-in-out;margin:auto;color:#fff}.product-card:hover{transform:translateY(-10px) scale(1.04);box-shadow:0 0 30px #4cc9f08c}.product-card img{width:230px;height:270px;object-fit:contain;border-radius:14px;transition:.3s}.product-card:hover img{transform:scale(1.06)}.product-title{font-size:22px;font-weight:700;margin-top:16px;color:#fff}.product-price{font-size:24px;font-weight:800;margin-top:12px;color:#4cc9f0;transition:.3s}.product-card:hover .product-price{color:#22c55e;transform:scale(1.1)}.light{background:linear-gradient(135deg,#e5eaf5,#fff);color:#232323}.light input,.light select{background:gray;color:#232323;border:1px solid black}.light .table-modern th{color:#000}.light .product-card{background:#0000000f;color:#1a1a1a;box-shadow:0 0 15px #50505040}.light .product-title{color:#232323}.light .product-price{color:#0d6efd}.light .product-card:hover{box-shadow:0 0 25px #0066ff59}.dark{background:linear-gradient(135deg,#0f1117,#1b2330);color:#fff}.preview-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:999;animation:fadeIn .3s ease-in-out}.preview-modal-content{background:#ffffff1a;padding:28px;border-radius:20px;width:380px;text-align:center;color:#fff;box-shadow:0 0 25px #00000073;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:popIn .35s ease-in-out;position:relative}.preview-modal-content img{width:240px;height:260px;object-fit:contain;margin-bottom:16px;border-radius:14px}.preview-modal-content h3{font-size:22px;font-weight:700;margin-bottom:10px}.preview-modal-content h4{font-size:24px;font-weight:800;color:#4cc9f0}.close-preview{position:absolute;top:12px;right:15px;font-size:28px;background:transparent;color:#fff;border:none;cursor:pointer;transition:.2s ease}.close-preview:hover{transform:scale(1.2);color:#ff6b6b}.light .preview-modal-content{background:#ffffffe6;color:#1a1a1a;box-shadow:0 0 20px #0003}.light .preview-modal-content h4{color:#0d6efd}.light .close-preview{color:#1a1a1a}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}