*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#1f2937}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#111827;color:white;padding:20px}.brand{font-size:20px;font-weight:700;margin-bottom:25px}.nav{display:block;width:100%;padding:12px;border:0;margin:6px 0;border-radius:8px;background:transparent;color:white;text-align:left;cursor:pointer}.nav:hover,.nav.active{background:#374151}.main{margin-left:240px;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topbar h1{margin:0}.topbar p{margin:5px 0;color:#6b7280}button{background:#2563eb;color:white;border:0;border-radius:8px;padding:10px 14px;cursor:pointer}button:hover{opacity:.9}.page{display:none}.page.active{display:block}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;margin-bottom:18px}.card{background:white;padding:18px;border-radius:14px;box-shadow:0 2px 8px #0001}.card small{color:#6b7280}.card h3{margin:8px 0 0;font-size:24px}.panel{background:white;border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 2px 8px #0001}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}input,select{padding:11px;border:1px solid #d1d5db;border-radius:8px;width:100%}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}th{background:#f9fafb}.alert{padding:12px;border-radius:8px;margin-bottom:15px}.alert.success{background:#dcfce7}.alert.error{background:#fee2e2}.hidden{display:none}pre{background:#111827;color:#e5e7eb;padding:15px;border-radius:10px;overflow:auto}@media(max-width:800px){.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0}.topbar{display:block}}