*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f0f2f5}#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:#fff}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#1565c0;color:#fff;position:sticky;top:0;z-index:20}.header-left{display:flex;align-items:center;gap:8px}.header h1{font-size:16px;font-weight:600}.header-actions{display:flex;align-items:center;gap:8px}.menu-toggle{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;display:none}.btn-login,.btn-logout{padding:5px 12px;border:1px solid rgba(255,255,255,.5);border-radius:6px;font-size:12px;cursor:pointer;text-decoration:none;color:#fff;background:transparent}.user-name{font-size:13px;opacity:.9}.layout{display:flex;flex:1}.nav{width:200px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;padding:8px 0;flex-shrink:0;position:sticky;top:44px;align-self:flex-start;max-height:calc(100vh - 44px);overflow-y:auto}.nav-item{padding:12px 20px;text-decoration:none;color:#555;font-size:14px;font-weight:500;border-left:3px solid transparent;transition:.1s}.nav-item:hover{background:#f5f5f5}.nav-item.active{color:#1565c0;border-left-color:#1565c0;background:#e3f2fd}.main{flex:1;overflow-y:auto;padding:20px}.page-title{font-size:20px;font-weight:600;margin-bottom:16px;color:#222}.card{background:#fff;border-radius:8px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px #00000014}.input{max-width:400px;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:10px}.input:focus{outline:none;border-color:#1565c0}.btn-submit{padding:12px 24px;background:#1565c0;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;font-weight:600}.btn-submit:disabled{opacity:.5}.btn-danger{padding:8px 16px;background:#d32f2f;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer}.btn-secondary{padding:8px 16px;background:#e0e0e0;color:#333;border:none;border-radius:6px;font-size:13px;cursor:pointer}.error{color:#d93025;font-size:13px;margin-top:8px}.success{color:#188038;font-size:13px;margin-top:8px}.tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}.tag-success{background:#e8f5e9;color:#2e7d32}.tag-warning{background:#fff3e0;color:#e65100}.tag-info{background:#e3f2fd;color:#1565c0}@media(max-width:767px){#app{max-width:480px}.menu-toggle{display:block}.nav{position:fixed;top:44px;left:0;bottom:0;width:240px;z-index:30;transform:translate(-100%);transition:transform .2s;border-right:1px solid #e0e0e0;max-height:none}.nav.open{transform:translate(0)}.main{padding:16px}.input{max-width:100%}.btn-submit{width:100%}}@media(min-width:768px){#app{max-width:100%;margin:0}.menu-toggle{display:none}}