:root{--primary: #1976d2;--primary-dark: #1565c0;--primary-light: #42a5f5;--secondary: #dc004e;--background: #fafafa;--surface: #ffffff;--error: #f44336;--error-light: #fee;--text-primary: rgba(0, 0, 0, .87);--text-secondary: rgba(0, 0, 0, .6);--text-disabled: rgba(0, 0, 0, .38);--divider: rgba(0, 0, 0, .12);--shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);--shadow-2: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.12);--shadow-3: 0 10px 20px rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.1);--shadow-4: 0 15px 25px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#f5f5f5;color:#333;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;box-shadow:0 2px 4px #0000001a;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:100}.nav-brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:500;color:#333}.nav-brand svg{stroke:var(--primary)}.nav-brand span{font-weight:500}.nav-menu{display:flex;gap:8px;flex:1;justify-content:center}.nav-link{background:transparent;border:none;color:#666;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;border-radius:4px;transition:all .2s}.nav-link:hover{background:#e0e0e0;color:#333}.nav-link.active{background:var(--primary);color:#fff}.nav-user{display:flex;align-items:center;gap:16px}.nav-user span{color:#333;font-weight:500;font-size:14px}.nav-user button{background:var(--primary);border:none;color:#fff;padding:6px 16px;font-size:13px;font-weight:500;border-radius:4px;cursor:pointer;transition:background .2s}.nav-user button:hover{background:#1565c0}.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#333}.mobile-menu-toggle svg{width:24px;height:24px;stroke:#333;stroke-width:2}.main-content{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:24px}.container{width:100%}.dashboard{display:flex;flex-direction:column;gap:24px}.dashboard-header{margin-bottom:8px}.dashboard-header h1{font-size:24px;font-weight:400;color:var(--text-primary);margin-bottom:4px}.dashboard-subtitle{font-size:14px;color:var(--text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.stat-card{background:var(--surface);padding:24px;border-radius:4px;box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}.stat-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.stat-icon{width:48px;height:48px;border-radius:50%;background:var(--primary-light);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}.stat-content h3{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-number{font-size:32px;font-weight:400;color:var(--text-primary)}.table-container{background:var(--surface);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}.table-header{padding:16px 24px;border-bottom:1px solid var(--divider);display:flex;justify-content:space-between;align-items:center}.table-header h2{font-size:20px;font-weight:500;color:var(--text-primary)}.table-count{font-size:14px;color:var(--text-secondary)}table{width:100%;border-collapse:collapse}thead{background:var(--background)}th{text-align:left;padding:16px 24px;font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}td{padding:16px 24px;font-size:14px;color:var(--text-primary);border-top:1px solid var(--divider)}tr:hover{background:#0000000a}.btn{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-1)}.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-2)}.btn-text{background:transparent;color:var(--primary)}.btn-text:hover{background:#1976d214}.btn-delete{background:transparent;color:var(--error)}.btn-delete:hover{background:#f4433614}.badge{display:inline-block;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;background:var(--primary-light);color:#fff}.status-chip{display:inline-block;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.status-chip.active{background:#4caf501f;color:#2e7d32}.status-chip.inactive{background:#f443361f;color:#c62828}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.grid-card{background:var(--surface);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden;transition:transform .2s,box-shadow .2s}.grid-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}.grid-card-media{width:100%;height:180px;overflow:hidden;background:var(--background)}.grid-card-media img{width:100%;height:100%;object-fit:cover}.grid-card-content{padding:16px}.grid-card-title{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.grid-card-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:16px}.grid-card-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-top:1px solid var(--divider)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--surface);border-radius:4px;box-shadow:var(--shadow-4);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;animation:slideUp .3s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--divider)}.modal-header h2{font-size:20px;font-weight:500;color:var(--text-primary);margin:0}.modal-close{background:none;border:none;font-size:28px;color:var(--text-secondary);cursor:pointer;padding:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.modal-close:hover{background:#0000000a}.modal-content form{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group input[type=number],.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--divider);border-radius:4px;font-size:14px;color:var(--text-primary);background:var(--surface);transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}.form-group select{cursor:pointer}.form-group textarea{min-height:100px;resize:vertical}.form-group.checkbox{display:flex;align-items:center}.form-group.checkbox label{display:flex;align-items:center;margin:0;cursor:pointer;text-transform:none;font-size:14px;color:var(--text-primary)}.form-group.checkbox input[type=checkbox]{width:18px;height:18px;margin-right:8px;cursor:pointer}.form-error{background:#f4433614;color:var(--error);padding:12px 16px;border-radius:4px;font-size:14px;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid var(--divider);margin-top:8px}.add-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;box-shadow:var(--shadow-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;transition:all .2s;z-index:100}.add-button:hover{background:var(--primary-dark);box-shadow:var(--shadow-4);transform:scale(1.05)}.add-button:active{transform:scale(.95)}.loading{text-align:center;padding:48px;color:var(--text-secondary)}.error{text-align:center;padding:48px;color:var(--error);background:#f4433614;border-radius:4px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.navbar{padding:0 16px}.nav-brand span{display:none}.nav-menu{position:fixed;top:64px;left:0;right:0;background:#f5f5f5;flex-direction:column;gap:0;padding:16px;box-shadow:0 4px 6px #0000001a;display:none}.nav-menu.mobile-open{display:flex}.nav-link{width:100%;text-align:left;padding:12px 16px}.nav-user span{display:none}.mobile-menu-toggle{display:block}.main-content{padding:16px}.stats-grid,.grid{grid-template-columns:1fr}table{font-size:12px}th,td{padding:12px 8px}}