body{font-family:Arial,sans-serif;background:#f5f5f5;margin:0;padding:0}h1{text-align:center;color:#333}button{cursor:pointer}button.primary{background-color:#007bff;color:#fff}button.success{background-color:#28a745;color:#fff}button.danger{background-color:#dc3545;color:#fff}.container{max-width:700px;margin:40px auto;background:#fff;padding:30px;border-radius:12px;box-shadow:0 0 15px #0000001a}form{display:flex;flex-direction:column;gap:12px}input{padding:12px;border:1px solid #ddd;border-radius:6px;font-size:14px}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:220px;background:#1f1f1f;padding:20px;display:flex;flex-direction:column;gap:15px;box-shadow:2px 0 8px #0006;flex-shrink:0}.sidebar h2{margin:0 0 20px;font-size:1.5rem;color:#0b84ff}.sidebar button{padding:12px;background:#2c2c2c;color:#eee;border:none;border-radius:6px;cursor:pointer;text-align:left;font-size:1rem;transition:background .3s ease}.sidebar button:hover{background:#3d3d3d}.sidebar button.active{background:#0b84ff;color:#fff}.main-content{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:40px;overflow-y:auto;background:#121212;color:#eee}.login-container{max-width:400px;margin:80px auto;padding:30px;background:#1e1e2f;border-radius:12px;box-shadow:0 0 20px #0009;color:#eee}.login-title{text-align:center;margin-bottom:20px;font-size:24px;color:#fff}.login-form{display:flex;flex-direction:column;gap:15px}.login-input{padding:12px;border:1px solid #333;border-radius:6px;background:#2a2a40;color:#f0f0f0;font-size:14px}.login-input::placeholder{color:#888}.login-button{padding:12px;background:linear-gradient(135deg,#007bff,#0056b3);border:none;border-radius:6px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .3s ease}.login-button:hover{background:linear-gradient(135deg,#0056b3,#003d82)}.login-error{color:#ff4d4f;text-align:center;margin-top:10px;font-weight:700}.supplier-wrapper{flex:1;padding:30px;background:#121212;color:#eee;width:100%}.supplier-wrapper h1{margin-bottom:20px;font-size:1.8rem;color:#0b84ff}.add-supplier-form{background-color:#1e1e1e;padding:30px;border-radius:12px;width:100%;max-width:700px;margin:0 auto;box-shadow:0 0 20px #0009;display:flex;flex-direction:column;gap:16px}.add-supplier-form input{padding:14px;border-radius:8px;border:1px solid #333;background-color:#2c2c2c;color:#e0e0e0;font-size:16px}.add-supplier-form button{padding:14px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:16px;background-color:#4caf50;color:#fff;transition:background .3s}.add-supplier-form button:hover{background-color:#45a049}.table-container{overflow-x:auto}.supplier-table{width:100%;border-collapse:collapse;background:#1e1e1e;border-radius:10px;overflow:hidden}.supplier-table th,.supplier-table td{padding:14px 18px;border-bottom:1px solid #333;text-align:left;white-space:nowrap}.supplier-table th{background:#2a2a2a;color:#0b84ff;font-weight:700;font-size:.95rem}.supplier-table tr:hover{background:#2c2c2c}.supplier-table td button{background:#dc3545;color:#fff;padding:6px 12px;border:none;border-radius:6px;cursor:pointer;transition:background .3s}.supplier-table td button:hover{background:#b52a38}.order-wrapper{flex:1;padding:30px;width:100%}.order-wrapper h3{margin-bottom:20px;font-size:1.8rem;color:#0b84ff}.supplier-table td strong{color:#fff;font-weight:600}.badge{display:inline-block;padding:5px 10px;border-radius:12px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge.status-pending{background-color:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.4)}.badge.status-sent,.badge.status-shipped{background-color:#0b84ff33;color:#0b84ff;border:1px solid rgba(11,132,255,.4)}.badge.status-completed,.badge.status-paid{background-color:#28a74533;color:#28a745;border:1px solid rgba(40,167,69,.4)}.badge.status-cancelled,.badge.status-failed{background-color:#dc354533;color:#dc3545;border:1px solid rgba(220,53,69,.4)}.logs-page{background-color:#0f1116;color:#e0e0e0;font-family:Courier New,Courier,monospace;padding:2rem;min-height:100vh;display:flex;flex-direction:column}.logs-header{border-bottom:1px solid #2a2d33;margin-bottom:1.5rem;padding-bottom:.5rem}.logs-header h1{font-size:1.8rem;color:#4ade80;margin:0}.logs-header p{color:#aaa;font-size:.9rem;margin-top:.3rem}.logs-container{background-color:#000;border:1px solid #2a2a2a;border-radius:8px;padding:1rem;overflow-y:auto;flex:1;height:70vh;box-shadow:inset 0 0 10px #050505}.logs-container::-webkit-scrollbar{width:8px}.logs-container::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.log-entry{padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.5;white-space:pre-wrap;word-break:break-word}.log-time{color:#888}.log-level{font-weight:700;margin-left:.5rem}.log-arrow{color:#555;margin:0 .5rem}.log-msg{color:#9ffca3}.log-info .log-level{color:#4ade80}.log-warn .log-level{color:#facc15}.log-error .log-level{color:#f87171}.log-debug .log-level{color:#60a5fa}.logs-empty{color:#777;text-align:center;padding:2rem}.logs-status{color:#bbb;text-align:center}.logs-error{color:#ff6b6b;text-align:center;margin-bottom:1rem}.logs-footer{text-align:center;font-size:.8rem;color:#666;margin-top:1rem}