*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}
.app{max-width:1200px;margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.2);overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:18px 24px}
.brand{font-size:20px;font-weight:700;letter-spacing:.5px}
.brand img{height:24px;vertical-align:middle;margin-right:8px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:6px;transition:transform .15s ease,background .15s ease}
.nav a:hover{transform:translateY(-1px);background:rgba(255,255,255,0.15)}
.nav a.active{background:rgba(255,255,255,0.22)}
.content{padding:24px}
@media (max-width:768px){.nav{gap:6px}.nav a{padding:6px 10px}.content{padding:16px}}
.card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.btn{display:inline-block;padding:10px 14px;border:none;border-radius:6px;cursor:pointer;color:#fff;background:#667eea;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,0.15)}
.btn-primary{background:#667eea}
.btn-success{background:#28a745}
.btn-danger{background:#dc3545}
.btn-info{background:#17a2b8}
.btn-secondary{background:#6c757d}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;color:#495057}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid #ced4da;border-radius:6px;font-size:14px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.15)}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid #ddd;padding:8px}
thead th{background:#f8f9fa}
.table-responsive{max-height:500px;overflow:auto}
.alert{padding:12px;border-radius:6px;margin-bottom:12px}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-danger{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.modal-dialog{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.25);max-width:720px;width:100%;max-height:90vh;overflow:auto;animation:modalIn .2s ease-out}
.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding:12px 16px}
.modal-title{font-size:18px;font-weight:700}
.modal-close{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#6c757d;transition:opacity .15s ease}
.modal-close:hover{opacity:.7}
.modal-dialog form,.modal-dialog .table-responsive{padding:12px 16px}
.modal-dialog .table-responsive table thead th{position:sticky;top:0;background:#fff;z-index:1}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:768px){.modal-dialog{max-width:95vw;border-radius:8px}}
/* Suggestions */
.suggest-box{position:absolute;background:#fff;border:1px solid #ced4da;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,0.12);z-index:1100;max-height:220px;overflow:auto}
.suggest-item{padding:8px 10px;cursor:pointer}
.suggest-item:hover{background:#f8f9fa}