body{font-family:Arial, sans-serif;margin:0;background:#f6f7fb;color:#111827} .nav{background:#111827;color:#fff;padding:12px 20px} .nav a{color:#fff;text-decoration:none;margin-right:12px} .nav .sep{opacity:.5;margin-right:12px} .container{max-width:1100px;margin:0 auto;padding:20px} .card{background:#fff;border-radius:10px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.06)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} img.thumb{width:100%;height:180px;object-fit:cover;border-radius:10px;cursor:zoom-in} .badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px} .btn{display:inline-block;padding:8px 12px;border-radius:8px;background:#111827;color:#fff;text-decoration:none;border:0;cursor:pointer} .btn.secondary{background:#374151} .btn.danger{background:#b91c1c} .table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:middle} input,select{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:720px){.form-row{grid-template-columns:1fr}} .alert{padding:10px;border-radius:10px;background:#fef2f2;color:#991b1b;margin-bottom:12px} .alert.ok{background:#ecfdf5;color:#065f46} .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);align-items:center;justify-content:center;padding:20px} .modal img{max-width:min(900px,95vw);max-height:90vh;border-radius:12px} .modal.open{display:flex} .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} img { max-width: 100%; height: auto; } .nav{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .nav a{ white-space:nowrap; } .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } @media (max-width: 768px){ .container{ padding:0 14px; } h2{ font-size:22px; } .form-row{ display:block; } .form-row > *{ width:100%; margin-bottom:12px; } .btn{ width:100%; } .btn.inline{ width:auto; } table thead{ display:none; } table, tbody, tr, td{ display:block; width:100%; } tr{ border-top:1px solid rgba(0,0,0,.08); padding-top:10px; margin-top:10px; } td{ border:0 !important; padding:8px 0 !important; } td[data-label]::before{ content: attr(data-label); display:block; font-size:12px; opacity:.7; margin-bottom:4px; font-weight:600; } .thumb{ width:88px !important; height:88px !important; object-fit:cover; } }